Question

我有可重复的元素

     <input style="display:inline" class="chkClass" type="checkbox" value="1"/>
     <div class="other">
 //something
     </div>

     <input style="display:inline" class="chkClass" type="checkbox" value="1"/>
     <div class="other">
 //something
     </div>
     ....

随着复选框的改变，我想只显示下一个“其他”类。它不起作用：

     $('.other').hide(); //hide all "other" elements

         $('.chkClass').live('change', function(){
            if($(this).is(':checked')){
                $(this).next('.other').show();
        }
       });

Answer 1

将nextAll与查询一起使用

$('.chkClass').on('change', function(){
       if($(this).is(':checked')){
          $(this).nextAll('.other:hidden:first').show();
       }
});

Answer 2

我明白了，但我需要为每个元素设置ID：

    $('.allOther').hide();


    $('.chkClass').on('change', function(){
            if($(this).is(':checked')){
                var array = $(this).attr('id').split('_');
                $('#other'+array[1]).show("slow");

            }
        });

        <input style="display:inline" class="chkClass" id="smthng_<?php echo $counter ?>" type="checkbox" value="1"/>
    <div id ="other<?php echo $counter ?>" class="allOther">

显示下一个类元素

2 个答案: