我對(duì) HTML、CSS 和 Jquery 很陌生（可能也是英語(yǔ)）。我有一個(gè)這樣的產(chǎn)品列表（標(biāo)簽只是象征性的）：<product id="product-1"> <thumbnail> <img> <!-- This product does not have the out-of-stock-icon --> </thumbnail> <detail></detail></product><product id="product-2"> <thumbnail> <img> <span class="out-of-stock-icon"></span> </thumbnail> <detail></detail></product><product id="product-3"> <thumbnail> <img> <span class="out-of-stock-icon"></span> </thumbnail> <detail></detail></product>我在這里想做的是找到一個(gè)內(nèi)部有缺貨圖標(biāo)的產(chǎn)品元素，然后降低其縮略圖不透明度。這是我的想法：if ($('product .out-of-stock-icon').length) { $('product thumbnail').css('opacity', '0.8');}我想要做什么（我不知道如何正確表達(dá)）：for (x in product) { if (product[x].has('out-of-stock-icon') { product[x].itsThumbnail.setOpacity(0.8); }}事實(shí)證明，所有產(chǎn)品縮略圖都變暗，而不僅僅是我上面指定的產(chǎn)品。我知道我做錯(cuò)了什么，但我無(wú)法找到正確的解決方案來(lái)解決這個(gè)問題。這是我在 stackoverflow 上的第一個(gè)問題。如果我做錯(cuò)了什么，請(qǐng)告訴我。抱歉我的英語(yǔ)不好，謝謝你幫助我。
4 回答
明月笑刀無(wú)情
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊
首先，您的 HTML 無(wú)效。您使用的所有元素均無(wú)效。你需要糾正這個(gè)問題。我在下面的示例中這樣做了，但顯然這是對(duì)您的 UI 做出假設(shè)。
要解決您的問題中提出的問題，您可以使用:has選擇器
$('.product:has(.out-of-stock-icon) .thumbnail').addClass('oos');
.oos {
opacity: 0.8;
}
img {
display: block;
width: 50px;
height: 50px;
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product" id="product-1">
<div class="thumbnail">
<img />
</div>
<div class="detail">In stock</div>
</div>
<div class="product" id="product-2">
<div class="thumbnail">
<img />
<span class="out-of-stock-icon"></span>
</div>
<div class="detail">Out of stock</div>
</div>
<div class="product" id="product-3">
<div class="thumbnail">
<img />
<span class="out-of-stock-icon"></span>
</div>
<div class="detail">Out of stock</div>
</div>
守著星空守著你
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊
在您的情況下，您需要使用parent()(方法遍歷 DOM 樹中每個(gè)元素的直接父級(jí)) 并且 該css方法為所選元素設(shè)置或返回一個(gè)或多個(gè)樣式屬性。
JavaScript
<script>
var elements = Array.from(document.querySelectorAll(".out-of-stock-icon"));
for(var i=0; i < elements.length;i++) {
elements[i].parentNode.style.opacity = 0.5;
}
</script>
jQuery
<script>
$(".out-of-stock-icon").parent().css('opacity', 0.5);
</script>
繁星coding
TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊
你需要的是jquery的parent()函數(shù)。它為您提供層次結(jié)構(gòu)中第一個(gè)匹配選擇器的父級(jí)。所以，
$('product?.out-of-stock-icon').parent('thumbnail').css('opacity',?'0.8');
蕪湖不蕪
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊
您必須檢查out-of-stock-icon產(chǎn)品內(nèi)是否存在任何具有類別的項(xiàng)目。
$("product").each(function(){
if($(this).find(".out-of-stock-icon").length)
$(this).find("thumbnail").css("opacity", 0.2);
});
$("product").each(function(){
if($(this).find(".out-of-stock-icon").length)
$(this).find("thumbnail").css("opacity", 0.2);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<product id="product-1">
<thumbnail>
Product 1
<img>
<!-- This product does not have the out-of-stock-icon -->
</thumbnail>
<detail></detail>
</product>
<product id="product-2">
<thumbnail>
Product 2
<img>
<span class="out-of-stock-icon"></span>
</thumbnail>
<detail></detail>
</product>
<product id="product-3">
<thumbnail>
Product 3
<img>
<span class="out-of-stock-icon"></span>
</thumbnail>
<detail></detail>
</product>
- 4 回答
- 0 關(guān)注
- 207 瀏覽
添加回答
舉報(bào)
0/150
提交
取消