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

您可能不需要测试用例中的.as-console {background-color:black !important; color:lime;} .as-console-wrapper {max-height:100% !important; top:0;}部分。 .getComputedStyle()应该注意：

!important

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

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";
   }

当另一个班级显示设置为内联块时，隐藏班级！重要

3 个答案: