javascript - 根据另一个 div 显示隐藏一个 div

Question

如果另一个 div 具有显示样式，我希望更改一个 div 的显示: block ；使用类名作为标识符

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

使用一些简单的 JavaScript:

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

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