4

如果我有 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>
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，因此您可以在 keyup 函数中使用此关键字

$('.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 回答