keyup events using class instead of id

问题:

If I have 2 textboxes, without using id's, how do I determine which textbox is firing off "keyup" events?

For various reasons I need to use classes instead of id's, where the class name is the same for both textboxes.

Infact, I could have the same textbox on the screen many times with the same class name.

The HTML looks something like this

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

回答1:

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

回答2:

Use the selector by class which use with a point for example:

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

And to determine which textbox it's fire use $(this).attr('id') in your event handler to get the ID of the current textbox. Also this tutorial could help you with selectors could help you with selectors

UPDATE

Adapting the code for your markup

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

回答3:

You can use the data- attribute to assign an id eg..

<input data-id="x" />

Then do something like.

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

回答4:

Since you don't have any id then you can use this keyword in the keyup function

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

回答5:

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

回答6:

You can use $(this):

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

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

回答7:

You could attach pretend IDs onto the elements using data()

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

Then read it back in the keyup event

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

回答8:

you may try this...:)

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