Как я могу назначить функцию щелчка многим кнопкам с помощью jQuery?

#javascript #jquery

Вопрос:

У меня есть 29 кнопок: todayResultsbutton0 .. todayResultsbutton28,
и 29 разделов: todayResultsUrls0 .. todayResultsUrls28.
У меня также есть функция toggleVisibility (divName), которая скрывает / показывает данный div. Я пытаюсь использовать следующий код:

 for (var i=0;  i < 29;   i) {
    var b = "#todayResultsbutton" i;
    var d = "todayResultsUrls" i;
    $(b).click(function(){toggleVisibility(d);});
}

Я думал, что это приведет к тому, что при каждом нажатии кнопки будет отображаться / скрываться соответствующий div, но фактический результат заключается в том, что при нажатии на любую кнопку (0 .. 28) будет отображаться / скрываться последний div — todayResultsUrls28.

Кто-нибудь может сказать мне, где я ошибаюсь?
Спасибо.

Ответ №1:

Используйте класс.

 $(".myClass").click(function() {
  var d = $(this).attr("id").replace("button", "Urls");
  toggleVisibility(d);
});

1. Это не решает проблему вызова toggleVisibility(d)

2. Я исправил это в соответствии с вашим примером. Просто присвоите всем вашим кнопкам один и тот же класс и внутри функции щелчка замените часть идентификатора, которая идентифицирует ее как кнопку, а не как URL.

Ответ №2:

Вместо того, чтобы пытаться использовать цикл, вам было бы лучше использовать селектор для «поиска» ваших divs..

допустим, у вас есть что-то вроде:

 <table>
<tr><td>
<input type="button" id="myButton" value="test" text="test" />
</td><td><div id="myDiv"></div></td></tr></table>

Вы можете найти myDiv по :

 $('#myButton').parent().find('#myDiv').hide();

Ответ №3:

Вы могли бы использовать селектор атрибута «StartsWith» с идентификатором, а затем создать URL-адрес из идентификатора выбранного элемента.

 $('[id^=todayResultsbutton]').click( function() {
     var url = this.id.replace(/button/,'Urls');
     toggleVisibility(url);
});

Ответ №4:

Использовать

var d = «#todayResultsUrls» i;

Вместо

var d = «todayResultsUrls» i;

Ответ №5:

Вы можете использовать это:

 $('button[id^="todayResultsbutton"]').click(function() {
    var index = this.id.substring(18,this.id.length);
    toggleVisibility("todayResultsUrls" index);
});

При этом будут найдены все <button> теги с идентификаторами, начинающимися с todayResultsbutton . Затем он получит идентификатор для выбранного тега, удалит todayResultsbutton его часть, чтобы получить идентификатор, а затем вызовет toggleVisibilty() функцию.

Вот пример.

Редактировать
Примечания:

Использование button перед началом работы с селектором ( [id^="todayResultsbutton"] ) ускоряет работу селектора jQuery, поскольку он может использовать встроенную getElementsByTagName функцию для получения всех тегов кнопок, а затем проверять их только на наличие определенного идентификатора.
this.id используется вместо jQuery, $(this).attr('id') потому что это быстрее (не требует переноса this или вызова дополнительной функции attr() ) и не должно вызывать никаких проблем с кроссбраузерностью.

Ответ №6:

Переключите видимость, найдя соответствующий div, используя цель события, а не классы и т.д.

Предполагая:

 <div id='todayResultsUrls1'>
    <button id='todayResultsbutton'></button>
</div>

Используя цель события, вы можете получить элемент button и найти div, который хотите скрыть.

 var parentDiv = $(e.target).parent();
toggleVisibility(parentDiv);