限制 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> 

  No boo

  <span class="child1">

    Child 1

    <span class="child2">Child 2</span> 

  </span>

</div>

<div class="boo">   

  Boo

  <span class="child1">

    Child 1

    <span class="child2">Child 2</span> 

  </span>

</div>

另请注意，如果这样做仅是出于 UI 原因，那么您根本不应该使用 JS。单独用CSS就可以实现：

div:not(.boo) .child1,

div.boo .child2 {

  display: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  No boo

  <span class="child1">

    Child 1

    <span class="child2">Child 2</span>

  </span>

</div>

<div class="boo">

  Boo

  <span class="child1">

    Child 1

    <span class="child2">Child 2</span>

  </span>

</div>

最后请注意，您的 span 元素缺少结束标记。我认为这只是问题中的一个拼写错误，因此我在此示例中更正了它。

Answer 2

为此，您不需要 jQuery：

let children = document.querySelectorAll('div.boo .child2, div:not(.boo) .child1');

for (var j = 0; j < children.length; j++) {

  children[j].classList.add("hide");

}

您还错过了 html 中的一些结束跨度标记，我假设这只是一个拼写错误。

另外，如上所述，如果这只是一个演示问题，您可以使用简单的 css 来完成此任务。