CODEWITHSUNDEEP
javascriptjquery
Alex Ritter
Alex Ritter

Reputation: 1041

If Element ID exists then Hide Other Element

I have an ecommerce website that has multiple prices for a given item. I am trying to set up a bit of script that will hide a price, if the lower price class is present on the page.

<table>
    <tbody>
        <tr>
            <td>
                <font>
                    <div class="product_listprice">199.99</div>
                </font>
                <font>
                    <div class="product_productprice">179.99</div>
                </font>
                <b>
                    <div class="product_saleprice">159.99</div>
                </b>
                <font>
                    <div class="product_discountprice">139.99</div>
                </font>
            </td>
        </tr>
    </tbody>
</table>

Essentially what I need is a script that will hide .product_productprice if .product_saleprice exists on the page, and will hide both .product_saleprice and .product_productprice if .product_discountprice exists.

Here's what I've come up with so far with some google digging.

<script type="text/javascript">
    $(document).ready(function(){
        if ( $(".product_discountprice").size() )
        $(".product_saleprice, .product_productprice").hide();
        });
    });   
</script>

However, it doesn't seem to be working. Any ideas? I'm a jquery novice, so I'm sure there is a better way to do this out there...

Upvotes: 3

Views: 4519

Answers (3)

Jakub Baski Gabčo
Jakub Baski Gabčo

Reputation: 355

Try this one.. Not sure if it is correct.

    <script type="text/javascript">
        $(document).ready(function(){
            if($(".product_discountprice").length()){
                $('.product_saleprice').hide();
                $('.product_productprice').hide();
            });
        });   
    </script>

Upvotes: -1

jmar777
jmar777

Reputation: 39649

// Essentially what I need is a script that will hide .product_productprice
// if .product_saleprice exists on the page...
if ($('.product_saleprice').length) {
    $('.product_productprice').hide();
}

// ...and will hide both .product_saleprice and .product_productprice
// if .product_discountprice exists.
if ($('.product_discountprice').length ) {
    $('.product_saleprice, .product_productprice').hide();
}

Update that adds a new class name, instead of hiding:

if ($('.product_saleprice').length) {
    $('.product_productprice').addClass('some-class');
}

if ($('.product_discountprice').length ) {
    $('.product_saleprice, .product_productprice').addClass('some-class');
}

Upvotes: 4

Ben Temple-Heald
Ben Temple-Heald

Reputation: 708

http://jsfiddle.net/3481uqa4/1/ 

  if ($(".product_discountprice").length) {
        $(".product_productprice, .product_saleprice").hide();       
    } else if ($(".product_saleprice").length) {
        $(".product_productprice").hide();
    }

Will hide both product price and sale price if product_discountprice exists, else if sale price exist hide product price. If neither of them exists, show the product price.

Upvotes: 0

Related Questions