CODEWITHSUNDEEP
javascriptjqueryhtml
Stephen Smith
Stephen Smith

Reputation: 99

Hiding DIV if n/a value is displayed

I'm developing a coffee shop product website. We have an area where each product has a coffee strength indicator. The database produces a value depending on whether the strength is Strong, Medium, Weak or n/a. The n/a is for non-coffee products.

If n/a is displayed I would like to hide the containing div.

The code I have so far is below. I have some JavaScript that replaces the text displayed by the database with an image for the strength indicator.

If the coffee-strength in the span tag is n/a I would like to hide .

Is this possible???

Thanks in advance.

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

Upvotes: 0

Views: 435

Answers (4)

Nono
Nono

Reputation: 7302

You have many ways to this:

HTML Code:

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

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

Upvotes: 0

Stephen Smith
Stephen Smith

Reputation: 99

Updated Script:

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

Upvotes: 0

emerson.marini
emerson.marini

Reputation: 9348

This should work:

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

Upvotes: 2

Bhadra
Bhadra

Reputation: 2104

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

        });

Upvotes: 0

Related Questions