1

jQueryを使用してhtmlテーブルの2つの値を比較し、数量>在庫の場合にユーザーに警告しようとしています。

現在の行の値を選択したい:

JS

    $('.item_quantity').change(function(){       
        var $this=$(this);        
        var quantity=$this.val();        
        // var inventory=$this.next('.item_inventory, td').text();
         var inventory=$(this).next('td, .item_inventory').text();

        console.log('quantity: ', quantity, 'inventory: ', inventory);
        if (quantity > inventory) {
          alert('Your order quantity ' + quantity + ' is greater than ' + inventory + ' inventory');
        }            
    });               
});

HTML

<table >    
  <tr>         
    <td><form method=""><input class="item_quantity" type="text"  data-prodid="249" value=""/></form></td>
    <td  class="item_inventory">10</td>
    <td>Product 1</td>
  </tr>

  <tr>         
    <td><form method=""><input class="item_quantity" type="text" data-prodid="2" value=""/></form></td>
    <td class="item_inventory">7</td>
    <td>Product 2</td>
  </tr>
</table>
4

1 に答える 1

3

変更点

var $this=$(this);        
var quantity=$this.val();

に

var quantity = parseInt($(this).val());
  1. $thisアクセスするためにインスタンス化する必要はありません.val()。
  2. 値を int に解析する必要があります。そうしないと、文字列が返されます。説明については、以下を参照してください。
var inventory=$(this).next('td, .item_inventory').text();

に

var inventory = parseInt( $(this).closest('tr').find('.item_inventory').html());
  1. .item_inventory.item_quantityはフィールドの直接の兄弟でnext()はないため、DOM 要素を取得しません。両方の要素の親を見つけてから、 で要素を取得することを検討してくださいfind()。
  2. 値を int に解析する必要があります。

なぜ文字列ではなく int なのですか?

2 つの文字列比較の結果は必要なものではありません。文字列比較では、両方の文字列の各文字を 1 つずつ比較し、最後に比較の結果を決定します。

例 ：

'10'と'8'が比較される場合、2 つの文字列を比較するときに、' 1'と'8'が比較され、次に'0'とnutsが比較されます。

その時点で、'1'は'8'よりもアルファベットの先頭に近くなり、その後の文字が何であれ、テストは false を返します。

詳細については、この記事を参照してください。

ワーキングフィドルが利用可能です。

于 2013-04-24T17:56:00.780 に答える