Как я могу активировать несколько кнопок на одной странице с помощью JavaScript/jQuery?

Я хочу создать страницу, на которой пользователь может выбрать несколько элементов, нажав на кнопку. Я уже использовал фокус и активные классы, чтобы изменить внешний вид кнопок, но с моим текущим кодом я могу активировать только одну кнопку. Я ищу код, который позволяет пользователю активировать несколько кнопок.

HTML

<button>
 button 1
</button>

<button>
 button 2
</button>

<button>
 button 3
</button>

<button>
 button 4
</button>

CSS

.btn:hover {
 background-color: rgba(52, 152, 219,0.6);
}

.btn:focus {
 background-color: rgba(52, 152, 219,0.6);
}

.btn:active, .btn:visited {
 background-color: rgba(52, 152, 219,0.6);
}

.active {
 background-color: rgba(52, 152, 219,0.6); 
}

Это код jQuery, который я использовал, чтобы попытаться добавить постоянный активный класс к тем кнопкам, которые были нажаты. Это пока не работает.

$(document).ready(function(){ 
 $('.btn').click(function() { 
 $('.btn').addClass('active');
 });
});
2 ответа

Вы должны использовать $(this) чтобы добавить active класс к нажатой кнопке

$(document).ready(function(){ 
 $('.btn').click(function() { 
 $(this).addClass('active');// use this here
 });
});

демонстрация

EDIT - как предложено @Regent, вы можете использовать toggleClass для активного и деактивированного при нажатии кнопки, используйте ниже код

$(document).ready(function(){ 
 $('.btn').click(function() { 
 $(this).toggleClass('active');
 });
 });

Демо для toggleClassПримечание. Здесь я прокомментировал .btn:focus css class, потому что при нажатии второй кнопки кнопка выглядит активной, поскольку она сфокусирована.


Это должно сделать это.

$(document).ready(function(){ 
$('.btn').click(function() { 
 $('.btn').toggleClass('active');
});
});

Я думаю, что если вы используете "это", действие вступит в силу только при нажатии кнопки.

licensed under cc by-sa 3.0 with attribution.