如果显示 n/a 值，则隐藏 DIV

Hiding DIV if n/a value is displayed

本文关键字：隐藏 DIV 显示 如果      更新时间：2023-09-26

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

如果显示 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(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(function ($) {
            $('.coffee-strength p span').each(function () {
                var string = $.trim($(this).text());
                if(string!="n/a"){
                    $(this).html('<img src="/images/' + string + '.png" alt="' + string + '" />');
                }else{
                    $(this).hide();     
                }
                });
        });

更新的脚本：

<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>

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

网页代码： 

<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>

j查询代码：

$(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();
});
相关文章：