Привет.
Воздействуем на кнопку:
<span class="action"><span class="toggle icon-play" data-toggle-class="toggle icon-pause"></span></span>
Оформляем исполнение:
$('.action').on('click', function () {
var toggle = $(this).find('.toggle'),
toggleClass = toggle.data('toggle-class');
toggle.data('toggle-class', toggle.prop('class')).removeClass().addClass(toggleClass); // 3
....
Всё - как обычно но, класс "многослойный":
|
Код:
|
.action {
display: flex;
justify-content: center;
align-items: center;
background: #;
outline: none;
cursor: pointer;
}
.toggle {
width: 30px;
height: 30px;
}
.action:active {background: #;}
.icon-play {background-image: url(path/to/play.svg);}
.icon-pause {background-image: url(path/to/pause.svg);} |
По клику - всё работает, а вот, по "ended" - нет. Бро возвращает два img-изображения - одно по верх другого, без фона, от "action". По логике класс, который заменяется, хранится в data-togle-class. Как его, оттуда, вытащить, без клика?
