Javascript-форум - toggle-процедура

Привет.
Воздействуем на кнопку:

<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. Как его, оттуда, вытащить, без клика?