Question

我有一个jquery来显示和隐藏div，它只与一组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/

Answer 1

看看这个：

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');
});

我仍然不确定我理解你的目标，但也许这很接近。

jquery显示/隐藏多组div

1 个答案: