javascript - 如果存在元素 ID，则隐藏其他元素

Question

我有一个电子商务网站，该网站对给定商品有多个价格。如果页面上存在较低的价格等级，我正在尝试设置一些隐藏价格的脚本。

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

基本上我需要的是一个脚本，如果页面上存在 .product_saleprice，它将隐藏 .product_productprice，如果 .product_discountprice 存在，它将隐藏 .product_saleprice 和 .product_productprice。

这是我到目前为止通过一些谷歌挖掘得出的结论。

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

然而，它似乎并没有起作用。有任何想法吗？我是 jquery 新手，所以我确信有更好的方法可以做到这一点......

Answer 1

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

---

添加新类名的更新，而不是隐藏:

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

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