4

IDを使用せずに2つのテキストボックスがある場合、どのテキストボックスが「キーアップ」イベントを発生させているかを判断するにはどうすればよいですか。

さまざまな理由から、idの代わりにクラスを使用する必要があります。クラス名は両方のテキストボックスで同じです。

実際、同じクラス名で同じテキストボックスを何度も画面に表示することができました。

HTMLは次のようになります

<div class="outer_div">
   <input type="text" class="mytextbox" />
   <div class="inner_div"></div>
</div>

<div class="outer_div">
   <input type="text" class="mytextbox" />
   <div class="inner_div"></div>
</div>

<div class="outer_div">
   <input type="text" class="mytextbox" />
   <div class="inner_div"></div>
</div>
4

8 に答える 8

11 
$('.mytextbox').keyup(function(event){
 // play with event
 // use $(this) to determine which element triggers this event
});
于 2012-05-23T14:07:59.153 に答える
1

たとえば、ポイントで使用するクラスごとのセレクターを使用します。

$('.foo').keyup(function(){
     $(this).attr('id');
});

また、イベントハンドラーで使用するテキストボックスを特定して$(this).attr('id')、現在のテキストボックスのIDを取得します。また、このチュートリアルはセレクターを支援する可能性がありますセレクターを支援する可能性があります

アップデート

マークアップにコードを適合させる

$('input.mytextbox').keyup(function(){
     $(this).attr('id');
});
于 2012-05-23T14:05:38.067 に答える
1

data-属性を使用してIDを割り当てることができます。

<input data-id="x" />

次に、次のようなことを行います。

console.log($(this).data('id'));
于 2012-05-23T14:06:24.883 に答える
0

IDがないため、キーアップ機能でこのキーワードを使用できます

$('.txtboxClass').keyup(function(event) {
   $(this) <== "This is the current textfield"
})
于 2012-05-23T14:07:45.397 に答える
0

使用する $(".<classname>").keyUp(function (){ $(this).<whatever u do here> });

于 2012-05-23T14:08:06.973 に答える
0

$（this）を使用できます：

<input type="text" class="thisClass" />
<input type="text" class="thisClass" />

$(".thisClass").keyup(function() {
    alert($(this).val());
});
于 2012-05-23T14:08:38.957 に答える
0

を使用して要素にふりIDを添付できますdata()

$('.foo').each(function(i,e) {
    $(e).data('fakeid', 'fakeid'+i);
});

keyupその後、イベントでそれを読み返します

$('.foo').keyup(function(){
    var fakeid = $(this).data('fakeid');
});
于 2012-05-23T14:09:08.577 に答える
0

あなたはこれを試すことができます...:)

<table class="table_border">
    <tbody class="container-items_items">
        <tr>
        <th width="10%" class="text-right">Cost</th>
        <th width="5%" class="text-right">Quantity</th>
        <th width="10%" class="text-right">Total</th>
        </tr> 
     <tr class="item_items">
      <td class="text-right">
        <input type="text" name="qty" class="cost_text">
      </td>
        <td class="text-right">
          <input type="text" name="qty" class="qty_text">
      </td> 
     <td class="total_cost"></td>
    </tr>          
    </tbody>
</table>



<script type="text/javascript">
    $(document).ready(function()
         {
           $('.cost_text').on('keyup',function(e)
            {
                var cost_value = $(this).val();
                var qty_value = $(this).parents('.item_items').find('.qty_text').val();
                $(this).parents('.item_items').find('.total_cost').html(cost_value*qty_value).prepend('$');
            });

            $('.qty_text').on('keyup',function(e)
            {
                var qty_value = $(this).val();
                var cost_value = $(this).parents('.item_items').find('.cost_text').val();
                $(this).parents('.item_items').find('.total_cost').html(cost_value*qty_value).prepend('$');
            });
        })
</script>
于 2016-01-13T06:11:23.817 に答える