[英]Show Or Hide Div Based On CSS Class
I am trying to show or hide a div called "contact-form" on website based on another divs a css class, which is connected to whether a product is in or out of stock. 我正在尝试基于另一个div的css类在网站上显示或隐藏一个称为“ contact-form”的div,它与产品是否存货有关。
It needs to show the div if the class is "in-stock", and hide if it's class is "out-of-stock" 如果班级是“ in-stock”,则需要显示div;如果班级是“ in-of-stock”,则需要隐藏div
any ideas? 有任何想法吗? struggling to figure it out!
努力弄清楚!
<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>
Website is here - http://trent-art.co.uk/shop/barnes-david-still-life-of-flowers/ - out of stock product which needs the "submit best offer" button hiding if out of stock. 网站在这里-http://trent-art.co.uk/shop/barnes-david-still-life-of-flowers/-缺货产品,如果缺货,则需要隐藏“提交最佳报价”按钮。
$('#contact-form').toggle($('p.stock').hasClass('in-stock'));
OR 要么
if ($('p.stock').hasClass('in-stock')) {
$('#contact-form').show();
} else {
$('#contact-form').hide();
}
Since you didn't tag your question with jQuery
, here is a vanilla JS alternative: 由于您没有使用
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";
This code could be shortened into fewer lines (technically, you could do it in one), but I left it broken up for clarity. 可以将这段代码缩短为更少的行(从技术上讲,您可以在一行中完成),但是为了清楚起见,我将其拆分了。 The "consolidated" version would be:
“合并”版本为:
document.getElementById("contact-form").style.display =
(document.getElementsByClassName("stock")[0].className.indexOf("in-stock") < 0) ?
"none" : "block";
If you're not familiar with ternary operators, that is what I used in the last line . 如果您不熟悉三元运算符,那就是我在最后一行中使用的。 .
。 .
。 it's basically a one-condition, two-option, one-line,
if
statement. 它基本上是一个单条件,两个选项,单行的
if
语句。 The code says, "if 'in-stock' is in the sStockName
string value, then assign 'block' as the display
value, otherwise, use 'none'" 代码说,“如果
sStockName
字符串值中有'in-stock',则将'block'分配为display
值,否则,请使用'none'”
More info on ternaries here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator 有关三元组的更多信息,请访问: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
if there is 1 contact form per product then put div of contact form inside product and hide with css : 如果每个产品有1个联系表单,则将联系表单的div放到产品内部并用CSS隐藏:
.in-stock + .showOrHide
{
display:block;
}
.sold + .showOrHide
{
display:none;
}
https://jsfiddle.net/o379yqy5/1/ https://jsfiddle.net/o379yqy5/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.