如果此div具有此類，則隱藏另一個元素

Question

我想隱藏只有在特定的div（.variable項-3）具有“選擇”之類的按鈕。

單擊li時，將添加“ selected”類。

 if($('.variable-item-3').hasClass('selected')) { $('.button').hide(); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="variable-item-1">Option 1</li> <li class="variable-item-2">Option 2</li> <li class="variable-item-3 selected">Option 3</li> </ul> <button type="submit" class="button">Add to cart</button> 

Answer 1

更改selected班級后，需要執行測試。 您僅在頁面加載時運行一次，而在類更改時不會自動再次運行。

您可以將.toggle()函數與布爾參數一起使用，以使可見性取決於測試。

 $("li").click(function() { $("li").removeClass("selected"); $(this).addClass("selected"); $(".button").toggle(!$('.variable-item-3').hasClass('selected')); }); 

 li.selected { background-color: yellow; } .button { display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="variable-item-1">Option 1</li> <li class="variable-item-2">Option 2</li> <li class="variable-item-3 selected">Option 3</li> </ul> <button type="submit" class="button">Add to cart</button> 

Answer 2

由於您已經在使用javascript添加.selected類，因此使用其他答案中建議的javascript解決方案可能會更容易。 但是，如果您喜歡使用CSS（我個人更喜歡在可能的情況下使用CSS而不是Javascript），並且如果您關心的div在您關心的按鈕之前 ，那么您實際上可以只使用CSS。

.variable-item-3.selected ~ .button {
  display: none;
}

假定.button和.selected是同級。 它變得更加復雜，如果兩個都沒有兄弟姐妹，但它仍然是可能的，只要的祖先.button是同級.selected 。 在這種情況下，它將看起來像這樣：

.variable-item-3.selected ~ div .button {
  display: none;
}

如果未對HTML進行結構化，以使其中任何一種都可以使用，那么您將需要使用使用javascript進行處理的其他解決方案之一。