限制 JavaScript 只能在元素内工作

Question

是否可以仅在元素内部执行脚本？ 例如，我有一个 <div> 元素列表，每个元素内部有两个 <span> 。我用 JS 检查是否有任何 div 有一个名为“boo”的类分配给它。如果是这样，它应该添加一个类“hide”到具有类“child2”的<span>，如果没有，则应添加类“hide”到另一个具有“child1”类的<span>。 这是我的意思的一个例子。

<div> <span class="child1"></span><span class="child2"></span> </div>

<div class="boo"> <span class="child1"></span><span class="child2"></span> </div>

如果我现在使用如下所示的脚本，它会弄乱整个列表，因为它还会添加“隐藏”类到其他元素。我该如何解决这个问题？

var check = $("div").hasClass("boo");

                  if (check === true) {

                  $( ".child2" ).addClass("hide");

                  }

                  else {

                    $( ".child1" ).addClass("hide");

                  }

Answer 1

问题是因为您的代码仅查看第一个 div 元素，以及所有 .child1 和 .child2 元素.要解决此问题，请修改选择器以根据是否存在（或缺少）.boo 类进行选择：$('div.boo .child2').addClass('hide');$('div:not(.boo) .child1').addClass('hide');.hide { display: none; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp;&nbsp; No boo&nbsp; <span class="child1">&nbsp; &nbsp; Child 1&nbsp; &nbsp; <span class="child2">Child 2</span>&nbsp;&nbsp; </span></div><div class="boo">&nbsp; &nbsp;&nbsp; Boo&nbsp; <span class="child1">&nbsp; &nbsp; Child 1&nbsp; &nbsp; <span class="child2">Child 2</span>&nbsp;&nbsp; </span></div>另请注意，如果这样做仅是出于 UI 原因，那么您根本不应该使用 JS。单独用CSS就可以实现：div:not(.boo) .child1,div.boo .child2 {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div>&nbsp; No boo&nbsp; <span class="child1">&nbsp; &nbsp; Child 1&nbsp; &nbsp; <span class="child2">Child 2</span>&nbsp; </span></div><div class="boo">&nbsp; Boo&nbsp; <span class="child1">&nbsp; &nbsp; Child 1&nbsp; &nbsp; <span class="child2">Child 2</span>&nbsp; </span></div>最后请注意，您的&nbsp;span&nbsp;元素缺少结束标记。我认为这只是问题中的一个拼写错误，因此我在此示例中更正了它。

Answer 2

为此，您不需要 jQuery：let children = document.querySelectorAll('div.boo .child2, div:not(.boo) .child1');for (var j = 0; j < children.length; j++) {&nbsp; children[j].classList.add("hide");}您还错过了 html 中的一些结束跨度标记，我假设这只是一个拼写错误。另外，如上所述，如果这只是一个演示问题，您可以使用简单的 css 来完成此任务。