是否可以僅在元素內(nèi)部執(zhí)行腳本？ 例如，我有一個 <div> 元素列表，每個元素內(nèi)部有兩個 <span> 。我用 JS 檢查是否有任何 div 有一個名為“boo”的類分配給它。如果是這樣，它應(yīng)該添加一個類“hide”到具有類“child2”的<span>，如果沒有，則應(yīng)添加類“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>如果我現(xiàn)在使用如下所示的腳本，它會弄亂整個列表，因為它還會添加“隱藏”類到其他元素。我該如何解決這個問題？var check = $("div").hasClass("boo"); if (check === true) { $( ".child2" ).addClass("hide"); } else { $( ".child1" ).addClass("hide"); }
2 回答
幕布斯7119047
TA貢獻1794條經(jīng)驗 獲得超8個贊
問題是因為您的代碼僅查看第一個 div 元素，以及所有 .child1 和 .child2 元素.
要解決此問題，請修改選擇器以根據(jù)是否存在（或缺少）.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 原因，那么您根本不應(yīng)該使用 JS。單獨用CSS就可以實現(xiàn)：
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 元素缺少結(jié)束標記。我認為這只是問題中的一個拼寫錯誤，因此我在此示例中更正了它。
慕桂英3389331
TA貢獻2036條經(jīng)驗 獲得超8個贊
為此，您不需要 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 中的一些結(jié)束跨度標記，我假設(shè)這只是一個拼寫錯誤。
另外，如上所述，如果這只是一個演示問題，您可以使用簡單的 css 來完成此任務(wù)。
- 2 回答
- 0 關(guān)注
- 208 瀏覽
添加回答
舉報
0/150
提交
取消