события keyup с использованием класса вместо id

Question

Если у меня есть 2 текстовых поля без использования id, как определить, какое текстовое поле отключает события «keyup»?

По различным причинам мне нужно использовать классы вместо id, где имя класса одинаково для обоих текстовых полей.

Infact, я мог бы иметь одно и то же текстовое поле на экране много раз с тем же именем класса.

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'); 
}); 

А чтобы определить, какой TextBox это огонь использование $(this).attr('id') в обработчике события для получения идентификатора текущего текстового поля. Кроме того, это руководство может помочь вам с селекторов could help you with selectors

UPDATE

Адаптация кода для разметки

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

Answer 3

Вы можете использовать атрибут DATA- назначить идентификатор, например ..

<input data-id="x" /> 

Затем сделайте что-нибудь подобное.

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

Answer 4

Поскольку у вас нет каких-либо идентификатор, то вы можете использовать это ключевое слово в функции KeyUp

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

Answer 5

использование $(".<classname>").keyUp(function(){ $(this).<whatever u do here> });

Answer 6

Вы можете использовать $ (это):

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

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

Answer 7

Вы можете прикрепить притвориться идентификаторы на элементы с помощью data()

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