如何通过jQuery / javascript在ASP.NET转发器中选择特定的html元素？

Question

I have an ASP.NET Repeater control, where a number of the following instances of code are generated/created in each ItemTemplate.

I am trying to create a function in jQuery/javascript, where the value in the 'qualityBox' text box, is incremented each time the up arrow is clicked. With my code, this only works for the first 'ItemTemplate' instance - ie the first row in my Repeater.

Could anyone kindly guide me in being able to make this work for each row in the Repeater? In other words, that the button pressed in a row makes the 'quantityBox' in that respective row only increment by 1.

Thanks!

Answer 1

The problem with your code is that your using ID. Id's are suppose to be unique. Therefore, when jQuery finds the first one, that's the one it uses. You need something that is meant to be repeatable, such as class.

<ItemTemplate>
    <div>
        <input type="text" id="quantityBox" value="0"/>
        <input type="button" class="upButton"/>
    </div>
</ItemTemplate>

Next up, you have to be able to select the correct quantity box.

 $(".upButton").click(function () {
     var quantityBox = $("#quantityBox", $(this).parent());
     var currentValue = quantityBox.val();
     quantityBox.val(parseInt(currentValue) + 1);
 });

This first thing to do is change the selector to add to click event to .upButton. This will attach the event to all instances of .upButton rather than just the first.

Next, why perform the DOM lookup twice when you can create a variable and just use that?

Third, It's ok to keep ID for quantityBox because I've added a context parameter. This is saying get the parent element of the clicked element, which in this case will be a td. Then, only look for #quantityBox inside of that element.

Give that a shot.

Answer 2

I would make a data-attribute on the qty box that has an ID of some sort and then also attach that id to the element that has the up arrow so you have a relationship between the two.

<ItemTemplate>
    <input type="text" id="quantityBox" data-elementID="$$" value="0"/>
    <input type="button" data-elementID="$$" id="upButton"/>
</ItemTemplate>