Значки jQuery и переключения не переключаются правильно

137
16

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

// Icon switch
$('.more').click(function() {
var iconClass = $(this).is(':visible') ? 'less' : 'more';
$(this).removeClass('more less').addClass(iconClass);
});
.icon {
display: block;
height: 18px;
width: 18px;
margin: 0 auto;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.icon.tick:before {
content: "\f00c";
color: #52555a;
}
.icon.info:before {
content: "\f05a";
height: 23px;
width: 33px;
}
.icon.more:before {
content: "\f067";
cursor: pointer;
height: 23px;
width: 23px;
color: #aad042;
}
.icon.less:before {
content: "\f068";
cursor: pointer;
height: 23px;
width: 23px;
color: #aad042;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>

спросил(а) 2021-01-19T14:50:12+03:00 9 месяцев назад
1
Решение
92

Проблема с вашим кодом заключается в том, что $(this).is(':visible') всегда будет возвращать true, поскольку вы не можете щелкнуть элемент, который не отображается (кроме visibility:hidden).

Вы можете использовать toggleClass() с несколькими классами, переданными следующим образом:

$(this).toggleClass('more less');

в обработчике

// Icon switch
$('.more').click(function() {
$(this).toggleClass('more less');
});
.icon {
display: block;
height: 18px;
width: 18px;
margin: 0 auto;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.icon.tick:before {
content: "\f00c";
color: #52555a;
}
.icon.info:before {
content: "\f05a";
height: 23px;
width: 33px;
}
.icon.more:before {
content: "\f067";
cursor: pointer;
height: 23px;
width: 23px;
color: #aad042;
}
.icon.less:before {
content: "\f068";
cursor: pointer;
height: 23px;
width: 23px;
color: #aad042;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>

ответил(а) 2021-01-19T14:50:12+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема