Как реализовать последовательное добавление классов?

Question

[goshatravin]

Добырй вечер , как реализовать добавление классов таким образом , что бы при нажатии на кнопу с синим цветом проверяло если ли уже цвет у первой , если есть идем ко второй если и там есть даем цвет третьей , и так далее и делать toggle цветов
есть 3 span елемента

<span class="span1">Т</span>
<span class="span2">А</span>
<span class="span3">К</span>

и три кнопки которые дают определенный цвет

<li class="list__item bg-green">один</li>
                        <li class="list__item bg-blue">два</li>
                        <li class="list__item bg-purple">три</li>

Answer 1

[BitRouter]

1. проверка наличия цвета
$(selector).css('background-color')
2. тогглик на классы toggleClass

пример:
HTML разметка

<ol class="nav-color">
    <li class="red" data-color="red">красный</li>
    <li class="blue" data-color="blue">голубой</li>
    <li class="orange" data-color="orange">апесинка :)</li>
</ol>
<div class="content-box">
    <span class="toggle-el">T</span>
    <span class="toggle-el">E</span>
    <span class="toggle-el">S</span>
    <span class="toggle-el">T</span>
</div>

JavaScript (поэтапное добавление цвета)

$('.nav-color').on('click', 'li', function(e){
    let content = $('.content-box');
    let currentColor = $(this).data('color');
    content.children('.toggle-el').each(function(i,e){
        if($(this).hasClass(currentColor)){
            $(this).next('.toggle-el').addClass(currentColor); 
            return false;
        }
    });
    return false;
});

PS js не проверял но в этом направление можно реализовать

Comments

[Николай Чуприк]

BitRouter, во-первых, у вас неправильно, не будет работать. После того, как вы закрасили элемент next(), в следующем проходе цикла each он уже будет иметь класс currentColor, поэтому сразу же закрасится следующая буква, и следующая... В то же время, когда нет ещё ни одной покрашенной, раскраска не сможет стартовать, т.к. if не выполняется.

А во-вторых, надо просто первый незакрашенный заселектить и закрасить его (см. мой ответ).

Answer 2

[Николай Чуприк]

html-разметка от BitRouter, спасибо ему.

$( '.nav-color' ).on( 'click', 'li', function()  {
    let currentColor = $( this ).data( 'color' );
    $( '.toggle-el:not(.' + currentColor + '):first' ).addClass( currentColor );
} );

P.S.: Тоже не проверял. :)

Comments

[BitRouter]

Николай Чуприк Благодарю за правку )) в данном случае вопрос стоял как а не "сделайте" пожалуйста)