Я пытаюсь изменить значок кнопки при нажатии.
С помощью следующего кода мне удалось изменить значок при первом нажатии, но он не меняется обратно при повторном нажатии.
HTML
<button class="toggle-button custom-navbar-toggle">
<i class="material-icons">menu</i>
</button>
JS
$('.custom-navbar-toggle').click(function(){
var $this = $(this);
if($this.hasClass('not-clicked')){
$this.html('<i class="material-icons clicked">menu</i>');
} else {
$this.html('<i class="material-icons not-clicked">check</i>');
}
});
Как я могу получить кнопку, чтобы изменить обратно после повторного нажатия?
3 ответа
Лучший подход - addClass()
и removeClass()
, как показано ниже: -
$('.custom-navbar-toggle').click(function(){
if($(this).children('i').hasClass('not-clicked')){
$(this).children('i').removeClass('not-clicked').addClass('clicked').html('menu');
} else {
$(this).children('i').removeClass('clicked').addClass('not-clicked').html('check');
}
});
Пример:-
$('.custom-navbar-toggle').click(function(){
if($(this).children('i').hasClass('not-clicked')){
$(this).children('i').removeClass('not-clicked').addClass('clicked').html('menu');
} else {
$(this).children('i').removeClass('clicked').addClass('not-clicked').html('check');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button custom-navbar-toggle">
<i class="material-icons">menu</i>
</button>
Примечание. - Ваш исходный код добавляет класс к дочерним элементам <i>
, поэтому вы должны проверять класс и для самих дочерних элементов, а не для кнопки.
Так что вы должны сделать это, как показано ниже:
$('.custom-navbar-toggle').click(function(){
if($(this).children('i').hasClass('not-clicked')){
$(this).html('<i class="material-icons clicked">menu</i>');
} else {
$(this).html('<i class="material-icons not-clicked">check</i>');
}
});
ПРИМЕР:-
$('.custom-navbar-toggle').click(function(){
if($(this).children('i').hasClass('not-clicked')){
$(this).html('<i class="material-icons clicked">menu</i>');
} else {
$(this).html('<i class="material-icons not-clicked">check</i>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button custom-navbar-toggle">
<i class="material-icons">menu</i>
</button>
В вашем коде $this
только цель $('.custom-navbar-toggle')
, которая является родителем i
, вам нужно перейти к потомку, чтобы вызвать .hasClass
Используйте find('i')
или children ()
$('.custom-navbar-toggle').click(function() {
var $this = $(this);
if ($this.find('i').hasClass('not-clicked')) {
$this.html('<i class="material-icons clicked">menu</i>');
} else {
$this.html('<i class="material-icons not-clicked">check</i>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button custom-navbar-toggle">
<i class="material-icons">menu</i>
</button>
Дайте класс "не нажали" по умолчанию.
<button class="toggle-button custom-navbar-toggle">
<i class="material-icons not-clicked">menu</i>
</button>
Затем с помощью функции toggerClass вы можете добавить удалить имена классов в тег i
$('.custom-navbar-toggle').click(function(){
$(this).find("i").toggleClass("not-clicked").toggleClass("clicked");
});
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.