CODEWITHSUNDEEP
jquery
Simon Fabb
Simon Fabb

Reputation: 53

If value in one div is higher than other

I'm trying to hide a div if the value in one div is higher than an other. So far I have this:

<div class="limit">500</div>
<div class="leased">600</div>
<div id="next">next</div>

$("#next").toggle($(".leased").text() > $(".limit").text());

So in effect if the value in the .leased div is higher than the value in the .limit div the #next div is hidden.

Currently I'm just seeing all divs display. I've done quite a bit of Googling, but no joy. It's probably too basic!

Upvotes: 1

Views: 527

Answers (4)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

A few things are incorrect in your code:

  1. You need to convert the text values you get from both the div to numbers using parseInt() or parseFloat() whichever suits your needs. Without it, comparison will be string based and produce unexpected results.

So, I have converted both values to integers here, and I check if lease is greater than limit, #next element is hidden, otherwise #next is shown.

if( parseInt($(".leased").text()) > parseInt( $(".limit").text() ) )
{
  $("#next").hide();
} 
else
{
  $("#next").show();
}

As mentioned by other people, toggle() does take a boolean variable. So, your own code can be modified simply by adding parseInt() or parseFloat() to it:

$("#next").toggle(parseInt($(".leased").text(), 10) < parseInt($(".limit").text(), 10));

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your code is close, you just need to convert the values you're comparing to integers using parseInt(). You also need to reverse the comparison to hide #next when the .leased value is higher. Try this:

$("#next").toggle(parseInt($(".leased").text(), 10) < parseInt($(".limit").text(), 10));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="limit">500</div>
<div class="leased">600</div>
<div id="next">next</div>

Upvotes: 1

Divyesh Patoriya
Divyesh Patoriya

Reputation: 518

Please have a look following snippet.

//$("#next").toggle($(".leased").text() > $(".limit").text());
//alert($(".leased").text());
//alert($(".limit").text());

if($(".leased").text() > $(".limit").text()){
    $("#next").toggle();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="limit">500</div>
<div class="leased">600</div>
<div id="next">next</div>

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

It is not php code ,just jquery! your should write your condition first before function is run..

if($(".leased").text() > $(".limit").text()){
$("#next").toggle();
}

Upvotes: 0

Related Questions