Як вибрати конкретний HTML-елемент у ретрансляторі ASP.NET за допомогою jQuery/javascript?

У мене є контроль повторювача ASP.NET, де створюється/створюється декілька наступних примірників коду в кожному елементі ItemTemplate.

Я намагаюся створити функцію в jQuery/javascript, де значення в полі textbox qualityBox збільшується при кожному натисканні стрілки вгору. За допомогою мого коду це працює тільки для першого екземпляра "ItemTemplate", тобто першого рядка у моєму репітері.

Чи може хто-небудь люб'язно вести мене в тому, щоб зробити цю роботу для кожного рядка у репітер? Іншими словами, що натискання кнопки по рядку робить "quantityBox" у відповідному рядку лише збільшенням на 1.

Дякую!

1

2 Відповіді

Проблема з вашим кодом полягає в тому, що ваш ідентифікатор використання. Id, мабуть, бути унікальним. Тому, коли jQuery знаходить перший, це той, який він використовує. Вам потрібно щось, що має бути повторюваним, наприклад, класом.


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

Далі, ви повинні мати можливість вибрати правильну коробку кількість.

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

Це перше, що потрібно зробити, це змінити селектор, щоб додати до клацання події до .upButton. Це додасть подію до всіх випадків .upButton, а не тільки до першого.

Далі, чому двічі виконувати пошук DOM, коли ви можете створити змінну і просто використовувати її?

По-третє, добре, щоб зберегти ідентифікатор для quantityBox, тому що я додав контекстний параметр. Це говорить про те, щоб отримати батьківський елемент натиснутого елемента, який у такому випадку буде td. Потім шукайте лише #quantityBox всередині цього елемента.

Дайте це постріл.

2
додано
існує ризик того, що рядки $ ("# numberBox", $ (this) .parent ()); можуть повертати більше одного вводу, якщо всі шаблони елементів поділяються звичайним батьком при рендерингу.
додано Автор Ivaylo Slavov, джерело
Не хвилюйся, я не помітив цього, доки ви не змусили мене переосмислити складність мого коду, і я згадав, що мені потрібно, щоб розділ div змінював взаємодію у шаблоні елемента. Я думаю, що комбінація обох рішень може добре вписуватися :)
додано Автор Ivaylo Slavov, джерело
Так, варто проголосувати :)
додано Автор Ivaylo Slavov, джерело
Дякую вам за допомогу! Це спрацювало :)
додано Автор Dot NET, джерело
Правда, однак я написав це припускаючи, що знаходиться всередині DataRepeater, тому це означає, що він буде поміщений в елемент td. Однак, щоб пом'якшити цю стурбованість, ви можете загорнути 2 вклади в div, як у вашому повідомленні. Це могло б фактично бути більш захисним способом кодувати його, оскільки припущення, як правило, погано :)
додано Автор mccow002, джерело
Я відредагував мою відповідь, щоб відобразити ваші побоювання
додано Автор mccow002, джерело

Я хотів би створити атрибут даних у поле qty, який має певний ідентифікатор, а потім також прикріпити цей ідентифікатор до елемента зі стрілкою вгору, щоб мати зв'язок між цими двома.


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

1
додано
@IwayloSlavov - атрибут data є частиною специфікації HTML5. ejohn.org/blog/html-5-data-atributes
додано Автор Sam, джерело
Я розглядаю питання "в останню чергу" використання користувацьких атрибутів html. Я знаю, що багато фреймів інтерфейсу користувача використовують і покладаються на власні атрибути (незважаючи на недійсний вихід HTML), але я завжди був вчив, що це погана практика, яку слід уникати, якщо це на нашому контролі. Але це дійсно важливо, щоб між двома входами в шаблоні елементів мав бути зв'язок, так що взаємодія між ними обмежена лише в межах цього шаблону.
додано Автор Ivaylo Slavov, джерело
Спасибі, завжди добре щось навчитися
додано Автор Ivaylo Slavov, джерело
var chat = new Chat();
var chat = new Chat();
642 учасників

Обсуждение вопросов по C# / .NET / .NET Core / .NET Standard / Azure Сообщества-организаторы: — @itkpi — @dncuug

ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram