Как перебрать кнопки в JavaScript?
У меня есть несколько кнопок на моем веб-сайте, и я хочу назначить разные задачи для каждой кнопки, в настоящее время я обращаюсь к ним по одной, используя getElementByID
и так как у меня так много кнопок, я закончил тем, что написал бесконечные строки кодов просто для ссылки на кнопки, имея некоторое знание java, я понимаю, что то, что я сделал, может быть достигнуто с помощью меньшего количества кода, используемого для цикла, но я не совсем уверен, как делать это, любая помощь приветствуется.
В настоящее время я так называю свои кнопки:
var Button1Menu = document.getElementById("button1menu");
var Button2Menu = document.getElementById("button2menu");
var Button3Menu = document.getElementById("button3menu");
var Button4Menu = document.getElementById("button4menu");
var Button5Menu = document.getElementById("button5menu");
var Button6Menu = document.getElementById("button6menu");
var Button7Menu = document.getElementById("button7menu");
var Button8Menu = document.getElementById("button8menu");
var Button9Menu = document.getElementById("button9menu");
.....
.....
.....
var Button43Menu = document.getElementById("button43menu");
а затем я назначаю прослушиватель кликов каждому:
Button1Menu.onclick = function() {
//doing something
};
Есть ли лучший способ добиться этого, пожалуйста.
6 ответов
Инициируйте счетчик и продолжайте проверять, пока не получите кнопку, которой не существует
var counter = 1;
var button = document.getElementById( "button" + counter + "menu" );
while ( button )
{
button.addEventListener("click", function(){
//do something here
});
button = document.getElementById( "button" + ( ++counter ) + "menu" );
}
если всем кнопкам нужно назначить событие нажатия, то
var buttons = document.querySelectorAll( "button[id^='button'][id$='menu']" );
for ( var counter = 0; counter < buttons.length; counter++)
{
buttons[counter].addEventListener("click", function(){
//do something here
});
}
$('button').on('click',function(){
alert($(this).attr('id'));
});
Теперь внутри события клика используйте $(this)
JQuery объект
Пожалуйста, попробуйте это (добавлена функция doSomething(item)
объяснить реальное использование):
function doSomething(item) {
switch (item.id) {
case 'button3menu':
// Make this button do something, only it. For example:
alert('Hey, you are pressing me!');
break;
default:
// Make all the button's whose id is not contemplated as a case value
alert('My id is: ' + item.id);
break;
}}
<script>
(function()
{
var num = 4;
for (var i = 0; i < num; i++)
{
var elem = document.createElement('button');
elem.id = "button" + i + "menu";
elem.innerHTML = "button" + i;
document.body.appendChild(elem)
elem.addEventListener('click', function(){doSomething(this)});
}
})()
</script>
Предполагая, что у вас есть родительский элемент для всех или некоторых ваших кнопок:
<div id="parent">
<button id="button1menu">button</button>
<button id="button2menu">button</button>
<button id="button3menu">button</button>
<button id="button4menu">button</button>
<button id="button5menu">button</button>
<button id="button6menu">button</button>
</div>
Для обработки всех из них достаточно одного прослушивателя событий:
document.getElementById("parent").addEventListener("click", function(e) {
// e.target is the clicked element
//check if button1menu has been clicked
if(e.target && e.target.id == "button1menu") {
alert(e.target.id + " was clicked");
}
//check if button2menu has been clicked
if(e.target && e.target.id == "button2menu") {
alert(e.target.id + " was clicked");
}
//etc
});
Вы можете больше экспериментировать в этой скрипке
Это называется делегированием событий, и это хорошо для вас.
Решение JQuery
$("button[id^='button']").on('click', function() {
console.log($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1menu">button</button>
<button id="button2menu">button</button>
<button id="button3menu">button</button>
<button id="button4menu">button</button>
<button id="button5menu">button</button>
<button id="button6menu">button</button>
Если кто-то все еще ищет решение - создайте коллекцию с помощью document.querySelectorAll, а затем через цикл назначьте индекс для каждой кнопки. После этого вы можете закладывать в каждый корпус тот функционал, который вам нужен. Это работает для простых задач.
Например, ниже у меня есть три кнопки, при нажатии на любую из них цвет фона изменится:
HTML:
<div id="page-container">
<button type="button" class="btn btn-red">red</button>
<button type="button" class="btn btn-green">green</button>
<button type="button" class="btn btn-blue">blue</button>
<script src="buttonCollection.js"></script>
</div>
JS:
let pageContainer = document.getElementById('page-container')
let buttons = document.querySelectorAll('.btn')
let index = undefined;
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener('click', function () {
index = i;
switch (index) {
case 0:
pageContainer.style.backgroundColor = "red";
break;
case 1:
pageContainer.style.backgroundColor = "green";
break;
case 2:
pageContainer.style.backgroundColor = "blue";
break;
default:
pageContainer.style.backgroundColor = "bisque";
break;
}
})
}