如何通過jQuery / javascript在ASP.NET轉發器中選擇特定的html元素？

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的所有實例，而不僅僅是第一個.upButton。

接下來，為什么在創建變量時只執行兩次DOM查找並使用它？

第三，可以保留quantityBox的ID，因為我添加了上下文參數。 這就是說獲取clicked元素的父元素，在這種情況下將為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>