关于javascript：jQuery – 如果DIV类等于X，则使用不同的类隐藏所有其他DIV


jQuery - If DIV class equals X, hide all other DIVs with a different class

我是jQuery的新手，相当新的JS(一点知识)，我想创建一个jQuery代码。

首先，这是我的HTML代码：

1
2
3
4
5
6
7
8
9
10
11
    All
    ASUS
    HTC



    Nexus 7
    One S
    One X+
    Transformer Prime
    Windows Phone 8X

我想要一个jQuery代码，它将执行以下操作：

  • 如果我点击＃choice-asus DIV，那么所有带有.htc类的DIV都将被设置为display ="none"

  • 如果我点击＃choice-htc DIV，那么所有带有.asus类的DIV都将被设置为display ="none"

  • 如果我单击＃choice-all DIV，那么所有DIV都将设置为display ="inline-block"(这也是页面首次加载时的默认设置)

    • 我已经尝试过以下代码，但它没有做任何事情。

    1
    2
    3
    4
    5
    $(document).ready(function(){
        $("#choice-htc").click(function(){
            $(".htc").hide();
        })
    });

    感谢您的任何帮助，
    迪伦。

    相关讨论

    这么多选择:) http://jsfiddle.net/9RtUE/

    1
    2
    3
    4
    5
    6
    7
        $(function(){
            $("#user-controls").on('click','div',function(){
               var classToShow = this.id.split('-')[1],
                   filter = classToShow ==="all" ? 'div': '.' + classToShow;
               $("#devices").children().show().not(filter).hide();
             });
         });
    相关讨论

    您可以尝试以下代码 -

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function showAll(){
        $("#devices div").show();
    }
    function justASUS(){
        $("#devices div").hide();
        $("#devices .asus").show();
    }
    function justHTC(){
        $("#devices div").hide();
        $("#devices .htc").show();    
    }

    在这里演示。

    相关讨论

    1
    2
    3
    4
    5
    6
    $(document).ready(function(){
        if($('div').attr('class')=='X')
        {
             $('div').not($(this)).css('display','none');
        }
    });

    为了保持简单和清洁，你应该使用这样的解决方案

    1
    2
    3
    4
    5
    $(function(){
        $('#choice-asus').on('click', function(){
            $('#devices > div:not(.asus)').hide();
        });
    });

    它基本上说，如果你点击＃choice-asus，隐藏#devices中没有类asus的所有div。

    您可以根据自己的需要扩展/修改它。
    此外，它建议使用jquerys .on()方法代替click / bind或者你应用的处理程序。

    相关讨论

    在这里演示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(document).ready(function(){  
        $(".choice").click(function(){
             $(".android,.winph").hide();
            if($(this).attr("id")=="choice-all"){
                $(".android,.winph").show();
            }else if($(this).attr("id")=="choice-asus"){
                $(".asus").show();
            }else if($(this).attr("id")=="choice-htc"){
                $(".htc").show();
            }
        });
    });

    尝试使用jquery

    演示

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $('#choice-all').click(function(){
      $('.htc, .asus').show();
    });

    $('#choice-asus').click(function(){
      $('.asus').show();
      $('.htc').hide();
    });

    $('#choice-htc').click(function(){
      $('.htc').show();
      $('.asus').hide();
    });
    相关讨论