javascript - 如果这个类包含，则隐藏其他类内容

Question

<div class="product_discountprice" id="product_discountprice1">
    <font color="red">
        <b style="font-size: 20px; font-weight: bold;">VIP Price:
            <p class="listpriceonGrid">List Price</p>
        </b>
    </font>
    <font class="pricecolor colors_productprice">$63.00</font>
</div>

他们在网站上有此代码。您可以在此处查看实际站点 --> https://www.colonialacres.com/category-s/928.htm 您会看到有些商品有 VIP 价格和标价，有些商品没有 VIP 价格。我想做的是，如果商品有 VIP 价格，则隐藏“标价”文本，但如果没有 VIP 价格文本，标价应该在那里。任何想法、建议和帮助都将不胜感激。

当谈到 if-else 时，我不太擅长 javascript，尤其是。我之前试过:

<script type="text/javascript">
$(window).load(function(){
    if ($('.product_discountprice font b:contains("VIP Price:")')) {
        $('.product_discountprice font b p').css("display","none");
    }
});
</script>

但是没有用。所以请帮忙。

Answer 1

条件 if 将始终为真，因为对象 (jQuery) 在 JavaScript 中是一个真值。尽管 $('.product_discountprice font b p') 会选择所有与 if 条件无关的元素。

相反，组合选择器并将 CSS 应用于元素。

$('.product_discountprice font b:contains("VIP Price:") p').css("display","none");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_discountprice" id="product_discountprice1">
  <font color="red">
    <b style="font-size: 20px; font-weight: bold;">VIP Price:
            <p class="listpriceonGrid">List Price</p>
        </b>
  </font>
  <font class="pricecolor colors_productprice">$63.00</font>
</div>

<script type="text/javascript">
  $(window).load(function() {
    if ($('.product_discountprice font b:contains("VIP Price:")')) {
      $('.product_discountprice font b p').css("display", "none");
    }
  });
</script>