Question

如果我有两个文本框，而不使用id，我该如何确定哪个文本框触发“keyup”事件？

由于各种原因，我需要使用类而不是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>

Answer 1

$('.mytextbox').keyup(function(event){
 // play with event
 // use $(this) to determine which element triggers this event
});

Answer 2

按类使用选择器，例如：

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

要确定哪个文本框在您的事件处理程序中使用$(this).attr('id')来获取当前文本框的ID。此教程也可以帮助您选择could help you with selectors

<强>更新

调整标记代码

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

Answer 3

您可以使用data-属性来分配ID，例如..

<input data-id="x" />

然后做类似的事情。

console.log($(this).data('id'));

Answer 4

由于您没有任何ID，因此您可以在keyup函数中使用此关键字

$('.txtboxClass').keyup(function(event) {
   $(this) <== "This is the current textfield"
})

Answer 5

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

Answer 6

您可以使用$（this）：

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

$(".thisClass").keyup(function() {
    alert($(this).val());
});

Answer 7

您可以使用data()

将假装ID附加到元素上

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

然后在keyup事件

中阅读

$('.foo').keyup(function(){
    var fakeid = $(this).data('fakeid');
});

Answer 8

你可以尝试这个......：）

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

使用class而不是id的keyup事件

8 个答案: