Question

我正在尝试显示或隐藏名为＆＃34; contact-form＆＃34;的div。在网站上基于另一个divs css类，它与产品是否存货有关。

如果班级是＆＃34;库存＆＃34;则需要显示div，并隐藏它的班级是否是＆＃34;缺货＆＃34;

任何想法？努力想出来！

<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/ - 缺货产品需要提供最佳优惠＆＃34;如果缺货则隐藏按钮。

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标记您的问题，因此这是一个vanilla 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字符串值中，则将'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';
}

fiddle

fiddle2 ---带显示块的那个---

Answer 4

如果每个产品有1个联系表格，则在产品中加入div联系表格并用css隐藏：

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

.sold + .showOrHide
{
    display:none;
}

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

基于CSS类显示或隐藏Div

4 个答案: