Question

我有一个ASP.NET Repeater控件，在每个ItemTemplate中生成/创建了许多以下代码实例。

我正在尝试在jQuery / javascript中创建一个函数，其中'qualityBox'文本框中的值在每次单击向上箭头时递增。使用我的代码，这仅适用于第一个'ItemTemplate'实例 - 即我的Repeater中的第一行。

有人可以指导我能够为Repeater中的每一行做这项工作吗？换句话说，连续按下的按钮使得相应行中的“quantityBox”仅增加1.

谢谢！

Answer 1

您的代码存在的问题是您的使用ID。 Id的假设是独一无二的。因此，当jQuery找到第一个时，就是它使用的那个。你需要一些可重复的东西，比如上课。

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

接下来，您必须能够选择正确的数量框。

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

要做的第一件事是更改选择器以将click事件添加到.upButton。这会将事件附加到.upButton的所有实例，而不仅仅是第一个。

接下来，为什么在创建变量时只执行DOM查找两次？

第三，可以保留quantityBox的ID，因为我添加了一个context参数。这就是说获取被点击元素的父元素，在这种情况下将是一个td。然后，只在该元素中查找#quantityBox。

试一试。

Answer 2

我会在qty框上创建一个具有某种ID的数据属性，然后将该id附加到具有向上箭头的元素，这样你就可以在两者之间建立关系。

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

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

2 个答案: