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() 方法。此外，您需要从 find() 返回的元素中使用 :has()，以便该类仅添加到其子元素，而不是所有 .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 加载时出现。

Answer 2

jQuery(document).ready(function() {
  jQuery('.not_available').siblings('.quckorder-btn').hide();
});

<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>

Answer 3

对于每个按钮，获取父级，检查它是否有 .not_available // do stuff

document.querySelectorAll(".quckorder-btn").forEach(btn => {
  btn.parentElement.querySelector('.not_available') ? btn.style.display = "none" : btn
})

<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>

Answer 4

$( ".sblock4" ).each(function( index ) {
 var stock = $(this).find(".quckorder-btn").prev();
if ($(stock).hasClass("not_available")) {
stock.next().hide();
  }
});

<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>

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

4 个答案: