Question

我正在尝试使用jQuery隐藏或显示小于或大于20000的内容

这是我正在使用的表元素。使用自定义运费计算器动态填充td.weight。 api返回的最大重量为20000磅，然后归零。

我试图通过隐藏或显示div来通知用户，如果他们的计算重量超过20000磅或低于20000磅

如果此输出显示div.shipping-weight：

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

<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是.weight中的第一个DOM节点，例如文本节点" 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();
      }
   });

使用jQuery隐藏/显示div，如果小于或大于某个数字

3 个答案: