#c# #javascript #jquery #asp.net #html
#c# #javascript #jquery #asp.net #HTML
Вопрос:
У меня есть ASP.NET Элемент управления повторителем, где в каждом ItemTemplate генерируется / создается несколько следующих экземпляров кода.
Я пытаюсь создать функцию в jQuery / javascript, где значение в текстовом поле qualityBox увеличивается при каждом нажатии стрелки вверх. В моем коде это работает только для первого экземпляра ItemTemplate, то есть для первой строки в моем повторителе.
Может ли кто-нибудь любезно помочь мне сделать эту работу для каждой строки в повторителе? Другими словами, нажатие кнопки в строке приводит к увеличению ‘quantityBox’ в соответствующей строке только на 1.
Спасибо!
Ответ №1:
Проблема с вашим кодом заключается в том, что вы используете идентификатор. Предполагается, что идентификаторы уникальны. Поэтому, когда 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);
});
Первое, что нужно сделать, это изменить селектор, чтобы добавить событие щелчка.Кнопка вверх. Это прикрепит событие ко всем экземплярам .upButton, а не только к первому.
Далее, зачем выполнять поиск DOM дважды, когда вы можете создать переменную и просто использовать ее?
В-третьих, можно сохранить ID для quantityBox, потому что я добавил параметр контекста. Это говорит о получении родительского элемента выбранного элемента, который в данном случае будет td. Затем ищите только #quantityBox внутри этого элемента.
Попробуйте это сделать.
Комментарии:
1. существует риск того, что строка
$("#quantityBox", $(this).parent());может возвращать более одного ввода, если все шаблоны элементов имеют общий родительский элемент при визуализации.2. Верно, однако я написал это, предполагая, что <ItemTenplate> находится внутри DataRepeater , что означает, что он будет помещен в элемент td. Однако, чтобы уменьшить эту проблему, вы могли бы обернуть 2 входных данных в div, как в вашем сообщении. На самом деле это может быть более безопасным способом его кодирования, поскольку предположения обычно плохие 🙂
3. Не волнуйтесь, я этого не замечал, пока вы не заставили меня пересмотреть сложность моего кода, и я вспомнил, что мне нужен div для «охвата» взаимодействий в шаблоне элемента. Я думаю, что комбинация обоих решений могла бы вполне подойти 🙂
Ответ №2:
Я бы создал атрибут данных в поле qty с каким-либо идентификатором, а затем также прикрепил этот идентификатор к элементу со стрелкой вверх, чтобы у вас была связь между ними.
<ItemTemplate>
<input type="text" id="quantityBox" data-elementID="$$" value="0"/>
<input type="button" data-elementID="$$" id="upButton"/>
</ItemTemplate>
Комментарии:
1. Я бы рассмотрел «в крайнем случае» использование пользовательских атрибутов html. Я знаю, что многие фреймворки пользовательского интерфейса используют пользовательские атрибуты и полагаются на них (несмотря на недопустимый вывод html), но меня всегда учили, что это плохая практика, которой следует избегать, если она находится под нашим контролем. Но действительно важно, чтобы между двумя входными данными в шаблоне элемента была связь, чтобы взаимодействие между ними было ограничено только этим шаблоном.
2. @IvayloSlavov — Атрибут data является частью спецификации HTML5. ejohn.org/blog/html-5-data-attributes