使用 class 而不是 id 的 keyup 事件答案

【问题标题】：keyup events using class instead of id使用 class 而不是 id 的 keyup 事件
【发布时间】：2016-01-13 14:11:23
【问题描述】：

如果我有 2 个文本框，但不使用 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>

【问题讨论】：

请显示您的代码（HTML & JS）。
排除“id”属性不是一个好主意。
为什么不给一个id结尾带数字的呢？比如txtbox1,txtbox2??

标签： jquery jquery-selectors

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以使用 data- 属性来分配一个 id 例如..

<input data-id="x" />

然后做类似的事情。

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

【讨论】：

【解决方案3】：

按类使用选择器，例如与点一起使用：

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

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

更新

为您的标记调整代码

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

【讨论】：

除非他没有任何ID

【解决方案4】：

由于你没有任何 id 那么你可以在 keyup 函数中使用这个关键字

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

你可以使用 $(this):

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

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

【讨论】：

【解决方案7】：

您可以使用 data() 将假装 ID 附加到元素上

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

然后在keyup事件中读回它

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

【讨论】：

【解决方案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>

【讨论】：