CODEWITHSUNDEEP
javascriptjquerybigcommerce
Sean Bilger
Sean Bilger

Reputation: 23

Hide divs if another div has certain text

Basically, this is a storefront site. I want to be able to have the price display as "Login For Cost" when the customer is not logged in. When not logged in, the price for everything is defaulted to "$0.00".

Along with changing the price to "Login For Cost", I want to hide the divs that contain the "Add to cart" button and compare buttons.

I followed an example (found under "Adding the Javascript") I found online and this is what I came up with so far.. 

<script type="text/javascript">
$(document).ready( function() {
  $('.p-price em:contains("$0.00")').text("Login for Cost");
  $('.p-price:contains("$0.00")').text("Login for Cost");
})
</script>

<script type="text/javascript">
$(document).ready( function() {
  if ($('.p-price').html()=='Login for Cost') {
    $('.ProductActionAdd').hide();
    $('.ProductCompareButton').hide();
    $('.CompareButton').hide();
  } else {   
    $('.ProductActionAdd').show();
    $('.ProductCompareButton').show();
    $('.CompareButton').show();
  }
})
</script>

The first script works, where the price will be changed to "Login for Cost" when not logged in and displays the actual price when logged in. However, the second script hides the 3 divs both when logged in and not logged in.

Any help is appreciated! Thanks in advance!

Upvotes: 1

Views: 749

Answers (1)

Leo
Leo

Reputation: 5235

Using == in javascript is a bad practice. Instead use === like the following one and see if it works. And also use .text() instead of .html():

<script type="text/javascript"> 
$(document).ready( function() {
if ($('.p-price').text()==='Login for Cost') {
//Your code to hide
} else{
//Your code to show
})
</script>

Upvotes: 1

Related Questions