问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery not() 配合toggle() 使用时显示的内容为什么不正确？

头像
HK6014
    614

    想用jquery not()配合toggle() 实现过滤功能，但是显示的内容不对，如下图：

    clipboard.png

    全选后应该是显示全部内容的，但是少了几个，搞不清是哪里的问题

    clipboard.png

    代码：

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            width:1200px;
            margin: 100px auto;
        }
        .nav li{
            width:120px;
            height:50px;
            text-align: center;
            line-height: 50px;
            background:#333;
            list-style: none;
            color: #fff;
        }
        .list{
            display: flex;
            justify-content: space-between;
            align-content: flex-start;
            flex-wrap: wrap;
            width:1200px;
            height:1000px;
            margin: 0 auto;
        }
        .list li{
            display: block;
            width:280px;
            height:200px;
            background: #eee;
            margin: 0 0 20px 0;
            list-style: none;
            font-size: 24px;
            text-align: center;
            line-height: 200px;
        }
        .active{
            background: #ff5f5f !important;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li id="A1">显示包含1的</li>
        <li id="A2">显示包含2的</li>
        <li id="A3">显示包含3的</li>
        <li id="A4">显示包含4的</li>
    </ul>
    <ul class="list">
        <li class="A1 A2">1，2</li>
        <li class="A2 A4">2，4</li>
        <li class="A3 A4">3，4</li>
        <li class="A4 A6">4，6</li>
        <li class="A1 A2">1，2</li>
        <li class="A2 A3">2，3</li>
        <li class="A1 A2">1，2</li>
        <li class="A1 A3">1，3</li>
    </ul>


    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".nav li").click(function(){
                $(this).toggleClass("active");
            });

            $("#A1").click(function(){
                $(".list li").not(".A1").toggle();
            });
            $("#A2").click(function(){
                $(".list li").not(".A2").toggle();
            });
            $("#A3").click(function(){
                $(".list li").not(".A3").toggle();
            });
            $("#A4").click(function(){
                $(".list li").not(".A4").toggle();
            });
        });
    </script>
</body>
</html>
    jquery
    阅读 1.9k
    1 个回答
    得票最新
    头像
    边城
      59.8k157274
      ✓ 已被采纳

      toggle 每次都是反向操作。那么，如果一个元素有 A1 和 A2 两个类的时候，你希望点 A3 和 A4 按钮时它都被隐藏，但实际上点 A3 的时候它确实被隐藏了，但是点 A4 的时候不是又切换回显示了么……我觉得实际效果跟预期不符，可能是这个原因造成的，查查看

      https://jsfiddle.net/5dmjb1q9/

      $(".nav li")
    .click(function() {
        const $this = $(this);
        $this.toggleClass("active");
        id = $this.prop("id");
        const isActive = $this.hasClass("active");
        if (isActive) {
            $(".list li").filter(`.${id}`).show();
        } else {
            $(".list li").filter(`.${id}`).hide();
        }
    });

$(".list li").hide();
      查看全部 1 个回答
      推荐问题