Переключение JavaScript и jQuery на основном DIV не работает

0

Итак, я делаю это там, где у них есть несколько кнопок, и когда его щелкают, он делает скрытый DIV с содержимым невидимым, это то, что у меня есть:

HTML

<div id="disArea">   <!--The toggled Dac diplays in this area.-->
            <div class="Dac  1">
                <p>Dac 1/p>
            </div>

            <div class="Dac  2">
                <p>Dac 2/p>
            </div>

            <div class="Dac  3">
                <p>Dac 3/p>
            </div>

            <div class="Dac  4">
                <p>Dac 4/p>
            </div>

            <div class="Dac  5">
                <p>Dac 5/p>
            </div>
    </div>

            <div class="ibox" onclick="disToggle('.1')">Button 1 (Displays the Dac 1)</div>
            <div class="ibox" onclick="disToggle('.2')">Button 2 (Displays the Dac 2)</div>
            <div class="ibox" onclick="disToggle('.3')">Button 3 (Displays the Dac 3)</div>
            <div class="ibox" onclick="disToggle('.4')">Button 4 (Displays the Dac 4)</div>
            <div class="ibox" onclick="disToggle('.5')">Button 5 (Displays the Dac 5)</div>

Помните, что div с классом "Dac" скрыт, пока jQuery не выполнит следующее (ну, вот что я хочу делать, но это не так):

jQuery/JavaScript

function disToggle(DacNumClass)
{
  $("ibox").click(function()
  {
    $(DacNumClass).toggle();
  });
}

Я сделал это, используя функцию JavaScript с аргументом, аргумент вызывает Id или класс, который мне нужен .toggle(). Это может быть полная неправильная идея, поправьте меня, если я ошибаюсь. Как это работает, Dac имеет класс чисел вместе с ним, а аргумент функции - класс, например divToggle()

И у меня наконец мой CSS, не уверен, что это вообще важно, но вот оно:

CSS

#disArea {
width: 300px;
height: 300px;
margin-right: auto;
margin-left: auto;
background: green;
}

        .Dac {
        display: none;
        }

.ibox {
background: red;
display: block;
width: 125px;
height: 125px;
margin: 5px;
}

Кажется, он не переключается? что я сделал не так?

Пример jsFiddle

EDIT

* Исправлена связь с /p> вместо </p>

Кроме того, возможно ли одновременно открывать только одно Dac Div?

  • 0
    Просто чтобы ты знал. toggle () - удалено в версии 1.9. w3schools.com/jquery/jquery_ref_events.asp
  • 2
    @Jason Jason не эта реализация toggle () , это .toggle (функция, функция), которая была удалена
Показать ещё 1 комментарий

1 ответ

3
Лучший ответ

Поскольку disToggle сам по себе является обработчиком кликов, вы должны просто переключать целевой элемент внутри метода.

Кроме того, поскольку метод disToggle используется как встроенный обработчик, он должен быть добавлен в глобальную область, по умолчанию jsfiddle добавит данный скрипт в оболочку window.onload=function(){...} которая сделает метод disToggle приватным один для обработчика onload. Вам нужно выбрать No Wrap - Body/Head в Left Side Panel → Second Dropdown

function disToggle(DacNumClass) {
    $('.Dac').not(DacNumClass).hide()
    $(DacNumClass).toggle();
}

Демо: скрипка

Более jQuery-ish решение

<div class="ibox" data-target=".1">Button 1 (Displays the Dac 1)</div>
<div class="ibox" data-target=".2">Button 2 (Displays the Dac 2)</div>
<div class="ibox" data-target=".3">Button 3 (Displays the Dac 3)</div>
<div class="ibox" data-target=".4">Button 4 (Displays the Dac 4)</div>
<div class="ibox" data-target=".5">Button 5 (Displays the Dac 5)</div>

тогда

jQuery(function ($) {
    var $dacs = $('.Dac');
    $('.ibox').click(function () {
        var target = $(this).data('target');
        $dacs.not(target).hide();
        $(target).toggle();
    })
})

Демо: скрипка

  • 0
    Спасибо! но возможно ли открыть только один Dac div одновременно?
  • 0
    @XeroElixir смотрите обновление
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню