Question

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

如果显示不适用，我想隐藏包含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>

Answer 1

这应该有效：

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 + '" />');
    });
});

Answer 2

            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();     
                }
                });

        });

Answer 3

更新的脚本：

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

Answer 4

你有很多方法可以解决这个问题：

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>

jQuery代码：

$(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();
});

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

4 个答案: