我试图在网站上显示或隐藏一个名为"contact-form"的div，该div基于另一个div的css类，该类与产品是否缺货有关。
如果类是"in-stock"则显示div，如果类是"out- 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/-缺货产品，需要"提交最优报价"按钮隐藏如果缺货
$('#contact-form').toggle($('p.stock').hasClass('in-stock'));
或
if ($('p.stock').hasClass('in-stock')) {
$('#contact-form').show();
} else {
$('#contact-form').hide();
}
既然你没有用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语句。代码说，"如果'in-stock'在sStockName字符串值中，那么将'block'分配为display值，否则使用'none'"
关于三元格式的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
在纯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 ——一个显示块——
如果每个产品有一个联系人表单，则将联系人表单的div放入产品中并使用CSS隐藏:
.in-stock + .showOrHide
{
display:block;
}
.sold + .showOrHide
{
display:none;
}