Question

我想根据另一个div的显示样式来更改一个div的显示：使用类名作为标识符

<!-- if this div display is block -->
<div class="product alert stock">
  <a href="#" data-post="{&quot;action&quot;:&quot;https:\/\/www.99bikes.com.au\/productalert\/add\/stock\/product_id\/241114\/uenc\/aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,\/&quot;,&quot;data&quot;:{&quot;uenc&quot;:&quot;aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,&quot;}}"
    title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-benefits">
  <div id="productBPG" class="row w-row">
    <div class="w-col w-col-12">
      <div id="vertical_tabs" class="vertical-tabs ui-accordion ui-widget ui-helper-reset" role="tablist">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-vertical_tabs-header-0" aria-controls="ui-accordion-vertical_tabs-panel-0" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="titleBPG">5% Best Price Guarantee&nbsp; </span> <span class="subtitle">We'll&nbsp;beat&nbsp;any&nbsp;price&nbsp;by&nbsp;5%*</span></h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-vertical_tabs-panel-0" aria-labelledby="ui-accordion-vertical_tabs-header-0" role="tabpanel" aria-hidden="true" style="display: none;">
          <img class="logoBPG" src="/media/wysiwyg/bike-type/99-bikes-5_-price-beat-guarantee-product.png" alt="5% Price Beat Guarantee | We'll beat any price by 5%">
          <p class="paragraph small"> Our 5% Best Price Guarantee is our commitment that we offer the lowest price. If you find a cheaper price, we will beat it by 5%. </p>
          <ul>
            <li class="paragraph small"> Applies to any cheaper price found on any online store in Australia, or in a physical store within Australia. </li>
            <li class="paragraph small"> Applies when the competitor's final price inclusive of any taxes and delivery fees. </li>
            <li class="paragraph small"> *Excludes Garmin, other exclusions apply <a href="https://www.99bikes.com.au/price-beat">learn&nbsp;more&nbsp;here</a>.
            </li>
          </ul>
          <a class="button minimal sml w-button BPGbtn" onclick="return buildURLpricebeat(this)" href="" target="_blank">Request a Price Match</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以通过条件检查div是否可见来使用JQuery

if($('.product.alert.stock').is(':visible')) {
  $('.shipping-benefits').hide()
}

这是工作代码段：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  if($('.product.alert.stock').is(':visible'))
  {
    $('.shipping-benefits').hide();
  }
});
</script>
</head>
<body>

<div class="product alert stock">
  <a href="#" data-post="{&quot;action&quot;:&quot;https:\/\/www.99bikes.com.au\/productalert\/add\/stock\/product_id\/241114\/uenc\/aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,\/&quot;,&quot;data&quot;:{&quot;uenc&quot;:&quot;aHR0cHM6Ly93d3cuOTliaWtlcy5jb20uYXUvYmlrZTE3LWRrLXN3aWZ0LWp1bmlvci1wdXJwbGUtMjAxNw,,&quot;}}"
    title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-benefits">
  <div id="productBPG" class="row w-row">
    <div class="w-col w-col-12">
      <div id="vertical_tabs" class="vertical-tabs ui-accordion ui-widget ui-helper-reset" role="tablist">
        <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-vertical_tabs-header-0" aria-controls="ui-accordion-vertical_tabs-panel-0" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span><span class="titleBPG">5% Best Price Guarantee&nbsp; </span> <span class="subtitle">We'll&nbsp;beat&nbsp;any&nbsp;price&nbsp;by&nbsp;5%*</span></h3>
        <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-vertical_tabs-panel-0" aria-labelledby="ui-accordion-vertical_tabs-header-0" role="tabpanel" aria-hidden="true" style="display: none;">
          <img class="logoBPG" src="/media/wysiwyg/bike-type/99-bikes-5_-price-beat-guarantee-product.png" alt="5% Price Beat Guarantee | We'll beat any price by 5%">
          <p class="paragraph small"> Our 5% Best Price Guarantee is our commitment that we offer the lowest price. If you find a cheaper price, we will beat it by 5%. </p>
          <ul>
            <li class="paragraph small"> Applies to any cheaper price found on any online store in Australia, or in a physical store within Australia. </li>
            <li class="paragraph small"> Applies when the competitor's final price inclusive of any taxes and delivery fees. </li>
            <li class="paragraph small"> *Excludes Garmin, other exclusions apply <a href="https://www.99bikes.com.au/price-beat">learn&nbsp;more&nbsp;here</a>.
            </li>
          </ul>
          <a class="button minimal sml w-button BPGbtn" onclick="return buildURLpricebeat(this)" href="" target="_blank">Request a Price Match</a>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Answer 2

使用一些简单的JavaScript：

if (document.querySelector(".product.alert.stock").style.display == "block") {
    document.querySelector(".shipping-benefits").style.display = "none";
}

在setInterval中调用它，它将起作用。

隐藏基于另一个div显示的div

2 个答案: