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