Question

我正在尝试基于nth-child或基于计数的选择器制作一些隐藏节目项目。如果我单击第一行中的第一项，则应显示第二行的第一项，并且该行中的其他项应隐藏。请帮助简化代码。

$(document).ready(function(){

    $(".subrow1 .item-a a:nth-child(1)").click(function(){     
        $(".subrow2 .idgroupsub:nth-child(1)").show();  
         $(".subrow2 .idgroupsub:nth-child(2)").hide();
          $(".subrow2 .idgroupsub:nth-child(3)").hide();
           $(".subrow2 .idgroupsub:nth-child(4)").hide();
           $(".subrow2 .idgroupsub:nth-child(5)").hide();
           $(".subrow2 .idgroupsub:nth-child(6)").hide();
    });
    $(".subrow1 .item-a a:nth-child(2)").click(function(){     
        $(".subrow2 .idgroupsub:nth-child(2)").show();  
         $(".subrow2 .idgroupsub:nth-child(1)").hide();
          $(".subrow2 .idgroupsub:nth-child(3)").hide();
           $(".subrow2 .idgroupsub:nth-child(4)").hide();
           $(".subrow2 .idgroupsub:nth-child(5)").hide();
           $(".subrow2 .idgroupsub:nth-child(6)").hide();
    });

     $(".subrow1 .item-a a:nth-child(3)").click(function(){     
        $(".subrow2 .idgroupsub:nth-child(3)").show();  
         $(".subrow2 .idgroupsub:nth-child(1)").hide();
          $(".subrow2 .idgroupsub:nth-child(2)").hide();
           $(".subrow2 .idgroupsub:nth-child(4)").hide();
           $(".subrow2 .idgroupsub:nth-child(5)").hide();
           $(".subrow2 .idgroupsub:nth-child(6)").hide();
    });

});

http://jsfiddle.net/Lv5cn8xy/244/

Answer 1

我已经更新了小提琴。请查看此内容：http://jsfiddle.net/Lv5cn8xy/245/如果有帮助请告诉我。我为你的按钮添加了一个额外的属性，并编写了以下jQuery。

$(document).ready(function(){
    $(".subrow1 .item-a a").click(function(){  
        var show_div = $(this).attr('show');
        $('.idgroupsub').each(function(){
            $(this).hide();
        });
        $('.idgroupsub.item-'+show_div).show();
    });
});

Answer 2

您可以使用＆＃34; index（）＆＃34;函数并选择css如下：

$(document).ready(function(){

    $(".subrow1 .item-a a").click(function(){
        var index = $(this).index()+1;
        $(".subrow2 .idgroupsub:nth-child("+index+")").show();
        $(".subrow2 .idgroupsub:not(:nth-child("+index+"))").hide();
    });

});

工作示例：http://jsfiddle.net/CodeFoxx/us1nk859/

基于nth-child的子类别隐藏显示在多行中

2 个答案: