Переключить измененный класс кнопки
Я хочу создать кнопку-переключатель, в которой класс кнопки будет изменен с class="fa fa-toggle-off" на class="fa fa-toggle-on" при нажатии.
<button class = "btn btn-default" id = "btn" name = "btn"><i id = "change" class = "fa fa-toggle-off"></i></button>
Я создаю javascript ниже, однако он изменил кнопку style="display:none" вместо того, чтобы изменить ее класс.
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
$("#change").toggle(function()
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
}, function() {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});
Разве .toggle() в jQuery не переключает видимость (через CSS-атрибут display) элементов и, следовательно, не является причиной такого поведения?
На самом деле кнопка используется для переключения дочерней строки таблицы. И я хочу, чтобы значок кнопки переключения менялся при нажатии
В приведенном коде вы настраиваете прослушиватель каждый раз при нажатии кнопки; это явно неправильно. То, что вы на самом деле должны использовать, это api.jquery.com/toggleclass
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете использовать .toggleClass для альтернативного добавления или удаления класса.
$(document).ready(function() {
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-on");
});
});.fa-toggle-off {
color: red;
}
.fa-toggle-on {
color: blue;
}
.btn-default {
display: block;
width: 200px;
height: 50px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = "btn btn-default" id = "btn" name = "btn"><i id = "change" class = "fa fa-toggle-off">Hello my button</i></button>Ну вот, я использовал функцию toggleClass (http://api.jquery.com/toggleclass/) для переключения класса при нажатии кнопки, он отключит этот класс fa-toggle-off и активирует этот класс fa-toggle-on при нажатии
(https://api.jquery.com/click/) и наоборот.
$(document).ready(function(){
$("#btn").click(function() {
$("#change").toggleClass("fa-toggle-off fa-toggle-on");
});
});.fa-toggle-off {
background-color: #F00;
}
.fa-toggle-on {
background-color: #0F0;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class = "btn btn-default" id = "btn" name = "btn">
Button <i id = "change" class = "fa fa-toggle-off">AAA</i>
</button>Осторожно, в вашем коде вы проверяете, нажата ли кнопка #change, кнопка получила атрибут #btn ID.
Хотел бы я помочь тебе.
Вы можете проверить, существует ли класс включения/выключения, а затем удалить существующий класс и добавить новый класс, как показано ниже:
$(function() {
$('#btn').click(function(e) {
e.preventDefault();
var display = true,
image = 'details_close.png';
if ($('.td1:visible').length == $('.td1').length) {
display = false;
image = 'details_open.png';
}
$('.td1').toggle(display);
if ($("#change").hasClass("fa-toggle-off"))
{
$('#change').removeClass("fa-toggle-off").addClass("fa-toggle-on");
} else {
$('#change').removeClass("fa-toggle-on").addClass("fa-toggle-off");
});
});
});
Надеюсь, это поможет вам.
Вы уверены, что в то же время не происходит никаких других событий?