jquery показать / скрыть несколько групп div

0

У меня есть jquery, чтобы показать и скрыть divs, который отлично работает с одной группой div. Но теперь я хочу иметь несколько групп этих div и отображать первый div каждой группы, даже если вы измените переключатель из другой группы. Однако я не могу заставить сценарий показывать первый div каждой группы после изменения переключателя в другой группе.

Привет, мой Javascript

<script type="text/javascript">
window.onload = function () {
    $('.content').each(function () {
        $('.trigger').change(function () {
            $('.content').hide();
            $('.' + $(this).data('rel')).show();
        });
    });

    $('input[type=radio]:first', this).attr('checked', true);
};
</script>

Вот мой HTML

<div class="element">
    <input type="radio" name="group1" class="1 trigger" data-rel="1" />
    <input type="radio" name="group1" class="2 trigger" data-rel="2" />
    <input type="radio" name="group1" class="3 trigger" data-rel="3" />
    <input type="radio" name="group2" class="4 trigger" data-rel="4" />

</div>
<div id="firstgroup">
    <div class="1 content">text 1</div>
    <div class="2 content">text 2</div>
    <div class="3 content">text 3</div>
    <div class="4 content">text 4</div>
</div>

<div class="element">
    <input type="radio" name="group2" class="5 trigger" data-rel="5" />
    <input type="radio" name="group2" class="6 trigger" data-rel="6" />
    <input type="radio" name="group2" class="7 trigger" data-rel="7" />
    <input type="radio" name="group2" class="8 trigger" data-rel="8" />
</div>
    <div id="secondgroup">
    <div class="5 content">text 5</div>
    <div class="6 content">text 6</div>
    <div class="7 content">text 7</div>
    <div class="8 content">text 8</div>
</div>

и, наконец, только стили

<style>
 .none {
    display:none;
  }
 </style>

http://jsfiddle.net/94K3P/3/

  • 0
    У вас есть ряд проблем с синтаксисом, среди которых неправильное использование метода триггера и несколько значений идентификатора. Вы также действуете на смену простых div, которые нельзя редактировать.
  • 0
    так что вы хотите, чтобы событие .change показывало первый div в каждой группе ?? что еще?? Ваши удостоверения личности не должны иметь пробелов либо я думаю. (пожалуйста, кто-нибудь подтвердит, если в IDS все в порядке)
Показать ещё 1 комментарий
Теги:

1 ответ

0

Взгляните на это:

http://jsfiddle.net/isherwood/94K3P/8

$('.trigger').change(function () {
    $('.content.' + $(this).data('rel')).show().siblings('.content').not(this).hide();
});

$('.trigger:first-child').each(function () {
    $(this).attr('checked', true).trigger('change');
});

Я все еще не уверен, что понимаю вашу цель, но, возможно, это близко.

Поделиться
  • 0
    Это на полпути, все, что нужно сейчас сделать - это выбрать первое радио в каждой группе по умолчанию при загрузке страницы.
  • 0
    что-то вроде этой ссылки, но хотите строки $ (". 1"). prop ("флажок", правда) .change (); и $ (". 5"). prop ("флажок", true) .change (); быть динамичным, поэтому мне не нужно писать по одному для каждой группы
Показать ещё 1 комментарий

Ещё вопросы

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