javascript - jQuery 仅在具有另一个具有特定类的 div 的 div 中运行函数

Question

有代码例如:

<div class="row">

<div class="sblock4">
<h4>Product 1</h4>
  <div class="available">product available</div>
  <div class="quckorder-btn">Quick order</div>
</div>

<div class="sblock4">
<h4>Product 2</h4>
  <div class="available">product available</div>
  <div class="quckorder-btn">Quick order</div>
</div>

<div class="sblock4">
<h4>Product 3</h4>
  <div class="not_available">out of stock</div>
  <div class="quckorder-btn">Quick order</div>
</div>

</div>

如果父div有类为“not_available”的内部div，需要隐藏“快速订购”按钮

尝试了一些 JavaScript:

<script type="text/javascript">
  jQuery(document).ready(function(){
    if(jQuery('div').hasClass('not_available')){
      jQuery('.quckorder-btn').css('display', 'none');
    }
  });  
</script> 

另一个 JavaScript 示例:

<script type="text/javascript">
  jQuery(document).ready(function(){
if (jQuery('.sblock4:contains("out of stock")')) {
    jQuery(".quckorder-btn").addClass("hide-button");
}
  });  
</script>  

但是它或者根本不起作用，或者对所有具有 .quckorder-btn 类的 div 都起作用。 仅需要在具有另一个类为“not_available”的 div 的 div 中运行函数

感谢任何帮助。谢谢

Answer 1

要实现您的目标，您可以使用 :has() 方法。此外，您需要从 :has() 返回的元素中使用 find() ，以便该类仅添加到其子级，而不是所有 .quckorder -btn 元素。试试这个:

jQuery($ => {
  $('.sblock4:has(.not_available)').find('.quckorder-btn').addClass("hide-button");
});

.hide-button {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="sblock4">
    <h4>Product 1</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>
  <div class="sblock4">
    <h4>Product 2</h4>
    <div class="available">product available</div>
    <div class="quckorder-btn">Quick order</div>
  </div>
  <div class="sblock4">
    <h4>Product 3</h4>
    <div class="not_available">out of stock</div>
    <div class="quckorder-btn">Quick order</div>
  </div>
</div>

顺便说一句，我建议，对于像在缺货库存上隐藏“订单”按钮这样对业务至关重要的事情，最好在服务器端进行。尤其是因为它更安全，避免了用户禁用 JS 并因此仍然看到按钮的问题，而且还因为它避免了 FOUC当 DOM 加载时。