Javascript 显示不适用值时隐藏DIV

我正在开发一个咖啡店产品网站。我们有一个区域，每个产品都有一个咖啡强度指示器。数据库根据强度是强、中、弱还是n/a生成一个值。不适用于非咖啡产品

如果显示n/a，我想隐藏包含的div

到目前为止，我的代码如下。我有一些JavaScript，它用强度指示器的图像替换数据库显示的文本

如果span标签中的咖啡浓度为n/a，我想隐藏

这可能吗

提前谢谢

<div class="coffee-strength">
            <p>Coffee Strength: <span><?php echo $_product->getAttributeText('coffeestrength'); ?></span></p>
</div>



<script type="text/javascript">

            jQuery(function ($) {
                $('.coffee-strength p span').each(function () {
                    var string = $.trim($(this).text());
                    $(this).html('<img src="/images/' + string + '.png" alt="' + string + '" />');
                });

            });

</script>

咖啡强度：

jQuery（函数（$）{
$（'.p span'）。每个（函数（）{
变量字符串=$.trim（$（this.text（））；
$（this.html（“”）；
});
});

jQuery（函数（$）{
$（'.p span'）。每个（函数（）{
变量字符串=$.trim（$（this.text（））；
如果（字符串！=“不适用”）{
$（this.html（“”）；
}否则{
$（this.hide（）；
}
});
});

这应该可以：

jQuery(function ($) {
    $('.coffee-strength p span').each(function () {
        var string = $.trim($(this).text());

        if (string == "n/a")
            $(this).closest('.coffee-strength').hide();
        else
            $(this).html('<img src="/images/' + string + '.png" alt="' + string + '" />');
    });
});

jQuery（函数（$）{
$（'.p span'）。每个（函数（）{
变量字符串=$.trim（$（this.text（））；
如果（字符串==“不适用”）
$（this）.最近（'.coffee-strength'）.hide（）；
其他的
$（this.html（“”）；
});
});

更新的脚本：

<script type="text/javascript">

            jQuery(function ($) {
                $('.coffee-strength p span').each(function () {
                    var string = $.trim($(this).text());
                    if(string!="22"){
                        $(this).html('<img src="/images/' + string + '.png" alt="' + string + '" />');
                    }else{
                        $(this).closest('.coffee-strength').hide();    
                    }
                    });

            });

            </script>

jQuery（函数（$）{
$（'.p span'）。每个（函数（）{
变量字符串=$.trim（$（this.text（））；
如果（字符串！=“22”）{
$（this.html（“”）；
}否则{
$（this）.最近（'.coffee-strength'）.hide（）；
}
});
});

您有很多方法可以做到这一点：

HTML代码：

<div class="coffee-strength">
    <p>Coffee Strength: <span>Strong</span></p>
</div>
<div class="coffee-strength">
    <p>Coffee Strength: <span>Dim</span></p>
</div>
<div class="coffee-strength">
    <p>Coffee Strength: <span>n/a</span></p>
</div>

$(function ($) {
    $('.coffee-strength p span').each(function () {
        var string = $.trim($(this).text());
        if (string == 'n/a') {
          $(this).parent().hide();
        }
    });   
});

// or

$(function ($) {   
    $('.coffee-strength p span:contains("n/a")').parent().hide();
});

---

也许你可以在div的类中添加这个

，就像在JS中那样，你可以检查类来隐藏它。我建议使用可读性更高的

.closest（'.coffee-strength'）

而不是

.parent（）.parent（）

$(function ($) {
    $('.coffee-strength p span').each(function () {
        var string = $.trim($(this).text());
        if (string == 'n/a') {
          $(this).parent().hide();
        }
    });   
});

// or

$(function ($) {   
    $('.coffee-strength p span:contains("n/a")').parent().hide();
});