скрыть/показать DIV, если меньше или больше, чем определенное число, используя JQuery

Question

Я пытаюсь к нам JQuery, чтобы скрыть или показать что-то, если меньше или больше, чем 20000

Это элемент таблицы я использую. Td.weight заполняется динамически, используя пользовательский калькулятор доставки. Существует максимальный вес, возвращаемый api 20000 фунтов, а затем он равен нулю.

Я пытаюсь, чтобы уведомить пользователя, скрывая или показывая DIV, если их расчетный вес составляет более 20000 фунтов или меньше, чем 20000 фунтов

Показать div.shipping-вес, если этот выход:

<td class="weight"> 20000 <small><em> lb's </em></small><br> 
<div class="shipping-weight"><small>*Note: Up to 20,000 lbs max. For shipping requirements over 20,000 lb's call our</small><br> 
<small>PRICING HOTLINE: 1-877-444-444 </small> 
</div> 
</td> 

Скрыть div.shipping вес, если этот выход:

<td class="weight"> 19456 <small><em> lb's </em></small><br> 
<div class="shipping-weight"><small>*Note: Up to 20,000 lbs max. For shipping requirements over 20,000 lb's call our</small><br> 
<small>PRICING HOTLINE: 1-877-444-444 </small> 
</div> 
</td> 

Вот то, что я до сих пор.

$('td.weight').filter(function(index){ 
return parseInt(this.innerHTML) > 20000; 
    }).show('.shipping-weight'); 

Вот jsfiddel

* Редакция:

Это не похоже на огонь в моей просьбе AJAX, но работает на jsfiddle. Чтобы выполнить запрос, я использую keyup и livequery. Как следует:

 $('.input-mini').keyup().livequery('change', function() { 
       url = $(this.form).attr('action'); 
       data = $(this.form).serialize(); 
       $.post(url, data, function() { 
         $('#checkout').load('/store/checkout_table'); 
         $('#checkout_form').attr('action', url); 
    $('.weight').filter(function(index){ 
     var num = parseInt(this.firstChild.textContent); 
     return num >= 20000; 
    }).find('.shipping-weight').show(); 

      $.cookie('all_cookie', null); 

       }); 
       return false; 
     }); 

Answer 1

Working solution:

$('.weight').filter(function(){ 
    var num = parseInt(this.firstChild.textContent); 
    return num >= 20000; 
}).find('.shipping-weight').show(); 

Примечание: this.firstChild является первым узлом DOM внутри .weight, например, текстовый узел " 19456 ".

Answer 2

Попробуйте

<table> 
    <tr> 
     <td class="weight"> <SPAN>**200230**</SPAN> <small><em> lb's </em></small><br> 
      <div class="shipping-weight"><small>*Note: Up to 20,000 lbs max. For shipping requirements over 20,000 lb's call our</small><br> 
       <small>PRICING HOTLINE: 1-877-444-444 </small> 
      </div> 
     </td> 
    </tr> 
</table> 


<script type='text/javascript'> 
    $(document).ready(function() { 
     var weight = parseInt($('td.weight span').html().replace(/\*/g, '')); 
     if(weight >= 2000){ 
      $('div.shipping-weight').show(); 
     } else { 
      $('div.shipping-weight').hide(); 
     } 

    }); 
</script> 

Answer 3

$('.weight').filter(function() { 
     var weight = parseInt(this.firstChild.textContent); 
     if (weight >= 20000) { 
     $('.shipping-weight').show(); 
     } else { 
     $('.shipping-weight').hide(); 
     } 
    });