如果此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进行处理的其他解决方案之一。