Question

所有

<ul class="icontacts">
    <li id="a" class="item" style="display: block; "><a name="a" class="title">A</a>
        <ul>
            <li>
                <a class="my all">ajay</a>
                <a class="my all">anand</a>
                <a class="ex all">amy</a>
            </li>
        </ul>
     </li>
     <li id="c" class="item pmy" style="display: block; "><a name="c" class="title">C</a>
         <ul>
          <li>
              <a class="my all">Chim</a>
              <a class="my all">Ciny</a>
              <a class="ex all">Commy</a>
          </li>
         </ul>
     </li>
     <li id="d" class="item pmy" style="display: block; "><a name="d" class="title">D</a>
        <ul>
            <li><a class="my all">don</a></li>
         </ul>
     </li>
</ul>

在上面的代码中，我有明确的字母顺序列表。现在我有两种类型的条目，一种是“我的”，另一种是“前”

我有两个按钮，如果我点击“我的条目”它将只显示带有字母li的“我的”类条目

<li id="a" class="item pmy" style="display: block; "><a name="c" class="title">C</a>

相同的“ex”类按钮用于其他条目。

我正在做的是这个但是如果一个带有“item”类的li有2个不同的（“我的”和“ex”）条目，它就会失败。

<script>
    $(document).ready(function () {
      $(".pall").css("display","none");
    });

    $(".all_click").click(function(){
       $(".all").css("display","block"); 
    });

    $(".my_click").click(function(){
       $(".all").css("display","none");
       $(".my").css("display","block"); 
    });

    $(".ex_click").click(function(){
       //ec click function

       $(".my").css("display","none"); 
       $(".ex").css("display","block"); 

    });
</script>

我想要的结果是

对于所有情况：

A
ajay
anand
amy
B
Chim
Ciny
Commy
D
don

我的情况

A
ajay
anand
B
Chim
Ciny
D
don

对于案例前

A
amy
B
Commy

在这种情况下，带有项目类的li也不会显示。

Answer 1

将所有内容放入就绪功能
使用hide()和show()

代码：

$(document).ready(function() {
    $(".pall").hide();

    $(".all_click").click(function() {
        $(".all").show();
    });

    $(".my_click").click(function() {
        $(".all").hide();
        $(".my").show();
    });

    $(".ex_click").click(function() {
        //ec click function
        $(".my").hide();
        $(".ex").show();

    });
});

如何使用jQuery显示特定记录？

1 个答案: