当另一个类显示设置为inline-block时，隐藏一个类！important

Question

我需要隐藏一个类，这个类是基于另一个只使用JavaScript设置为inline-block !important的类显示。这是我到目前为止所拥有的：

window.onload = function() {

  hidedeliveryFunction() {
    var outOfstock = document.getElementsByClassName(".action,.alert"),
        deliveryOptions = document.getElementsByClassName(".shipping-product-info");

    if (outOfstock.style.display === "inline-block !important") {
      deliveryOptions.style.display = "none";
    }
  }
};

<!-- if this div display is inline-block !important -->
<div class="product alert stock">
  <a href="#" data-post="" title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-product-info">
  <div class="ship-clickcollect option--available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Available on orders over $40. Collection in 1-7 days. WA orders 1-14 days. <a href="/click-and-collect"
            target="_blank">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
  <div class="ship-homedelivery option--not-available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Free express shipping over $99. Some exclusions apply. <a href="/free-shipping-australia-wide">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
</div>

Answer 1

您可能不需要在用例中测试!important部分。 .getComputedStyle()应该照顾它：

window.addEventListener("DOMContentLoaded", function() {
  // Don't use .getElementsByClassName() as it returns a live node list
  // which isn't right for most use cases. And because you are only looking
  // for a single element match, use .querySelector() instead.
  var outOfstock = document.querySelector(".product.alert.stock");
  var deliveryOptions = document.querySelector(".shipping-product-info");

  if (getComputedStyle(outOfstock).display === "inline-block") {
    deliveryOptions.style.display = "none";
  }
});

.alert { display:inline-block !important; }

<!-- if this div display is inline-block !important -->
<div class="product alert stock">
  <a href="#" data-post="" title="Out of stock" class="action alert">Out of stock</a>
</div>

<!-- then this div display is none -->
<div class="shipping-product-info">
  <div class="ship-clickcollect option--available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Available on orders over $40. Collection in 1-7 days. WA orders 1-14 days. <a href="/click-and-collect"
            target="_blank">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
  <div class="ship-homedelivery option--not-available">
    <div class="shipping-product-info--options">
      <div class="shipping-product-info--icon"></div>
      <div class="shipping-product-info--available"></div>
      <div class="shipcontroller">
        <p>Free express shipping over $99. Some exclusions apply. <a href="/free-shipping-australia-wide">More&nbsp;info&nbsp;»</a></p>
      </div>
    </div>
  </div>
</div>

Answer 2

我不确定，但是当“outOfstock”元素符合条件时，您可以尝试删除“shipping-product-info”类

deliveryOptions.classList.remove("shipping-product-info")

Answer 3

也许你可以使用这个代码来隐藏

var hidediv = document.getElementById("hidediv");
var showdiv = document.getElementById("showdiv");
if (hidediv.style.display === "none") {
     showdiv.style.display = "block";
   } else {
     hidediv.style.display = "none";
   }