根據CSS類顯示或隱藏Div

Question

我正在嘗試基於另一個div的css類在網站上顯示或隱藏一個稱為“ contact-form”的div，它與產品是否存貨有關。

如果班級是“ in-stock”，則需要顯示div；如果班級是“ in-of-stock”，則需要隱藏div

有任何想法嗎？ 努力弄清楚！

<div id="contact-form"></div>

<p class="stock in-stock"></p> <!-- if product is in stock this shows-->

<p class="stock out-of-stock"></p> <!-- if out of stock this show-->

<script>

    if ('p.in-stock') {
        ('#contact-form').show();   
    }
    else {
        ('#contact-form').hide();
    }

</script>

網站在這里-http://trent-art.co.uk/shop/barnes-david-still-life-of-flowers/-缺貨產品，如果缺貨，則需要隱藏“提交最佳報價”按鈕。

Answer 1

$('#contact-form').toggle($('p.stock').hasClass('in-stock'));

要么

if ($('p.stock').hasClass('in-stock')) {
    $('#contact-form').show();
} else {
    $('#contact-form').hide();
}

Answer 2

由於您沒有使用jQuery標記問題，因此可以采用以下JS替代方法：

var formDiv = document.getElementById("contact-form");
var stockPara = document.getElementsByClassName("stock");
var sStockClass = stockPara[0].className;
formDiv.style.display = (sStockClass.indexOf("in-stock") < 0) ? "none" : "block";

可以將這段代碼縮短為更少的行（從技術上講，您可以在一行中完成），但是為了清楚起見，我將其拆分了。 “合並”版本為：

document.getElementById("contact-form").style.display =
    (document.getElementsByClassName("stock")[0].className.indexOf("in-stock") < 0) ?
    "none" : "block";

如果您不熟悉三元運算符，那就是我在最后一行中使用的。 。 。 它基本上是一個單條件，兩個選項，單行的if語句。 代碼說，“如果sStockName字符串值中有'in-stock'，則將'block'分配為display值，否則，請使用'none'”

有關三元組的更多信息，請訪問： https ： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Answer 3

用純Js表示：

var p= document.querySelector("p")

 if (p.className.match(/\bin-stock\b/)) {
document.querySelector("#contact-form").style.display = 'block';
}else{
document.querySelector("#contact-form").style.display = 'none';
}

小提琴

fiddle2 ---帶顯示塊的那個-

Answer 4

如果每個產品有1個聯系表單，則將聯系表單的div放到產品內部並用CSS隱藏：

.in-stock + .showOrHide
{
    display:block;
}

.sold + .showOrHide
{
    display:none;
} 

https://jsfiddle.net/o379yqy5/1/