基于jQuery实现父元素点击切换第一个子元素类名的技术求助

嘿，看了你的代码，发现有好几处小错误导致功能跑不起来，我帮你逐一排查并修正了，咱们来看看问题出在哪：

先说说那些肉眼可见的语法坑 #

1. HTML里的小失误 #

• 子div的class属性少了等号！比如<div class"blue">应该写成<div class="blue">，浏览器可认不出缺胳膊少腿的属性哦。
• 调用函数的时候，类名ib没加引号！AddOrRemoveClass(ib)会把ib当成变量找，但你根本没定义这个变量，得改成AddOrRemoveClass('ib')，把它当字符串传进去才行。

2. JavaScript里的逻辑问题 #

• 你用了class当变量名？这可是JS的保留关键字啊，不能拿来当变量用，直接用传入的thisClass就好，避免报错。
• jQuery的类操作方法不需要加.！hasClass、addClass这些方法只需要传类名字符串就行，比如判断有没有ib类，直接写$(child).hasClass(thisClass)，不用写成.ib。

修正后的完整代码（直接就能跑） #

HTML部分 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Toggle Class Demo</title>
    <style>
        .red {
            display: block;
            position: relative;
            background: red;
            width:200px;
            height:80px;
        }
        .blue {
            display: none;
            position: absolute;
            background: blue;
            width: 200px;
            height: 80px;
            left: 200px;
        }
        .green {
            display: block;
            position: relative;
            background: green;
            width:200px;
            height:80px;
        }
        .purple {
            display: none;
            position: absolute;
            background: purple;
            width:200px;
            height:80px;
            left: 200px;
        }
        .ib {
            display: inline-block; /* 这里你之前写错成inlineblock了，得加个横杠 */
        }
    </style>
</head>
<body>
    <div class="red" onclick="AddOrRemoveClass('ib')">
        <div class="blue"></div>
    </div>
    <div class="green" onclick="AddOrRemoveClass('ib')">
        <div class="purple"></div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function AddOrRemoveClass(thisClass) {
            const child = this.children[0];
            // 其实jQuery有个toggleClass方法，一步到位切换类名，不用手动判断啦
            $(child).toggleClass(thisClass);
        }
    </script>
</body>
</html>

额外提个小优化 #

原来的代码里手动判断加/移除类名有点麻烦，jQuery的toggleClass方法直接就能帮你搞定切换逻辑，代码一下子简洁好多~另外你的.ib样式里inlineblock拼写错了，应该是inline-block，不然样式不会生效哦。

现在点击红色或绿色的父元素，对应的蓝色/紫色子元素就能正确切换类名啦！

内容的提问来源于stack exchange，提问作者manuelmsni