Как добавлять классы итемам в завимости от пройденных шагов?

Question

[tkachenkoaanna097]

если мы на 3 шаге -то добавляем класс cost__elem--success первым двум элементам (cost__elem) -- для наглядности по умолчанию эти классы есть в разметке (cost__elem--success)

если на четвертом шаге - то первым трем
если на первом шаге - ничего не добавляем
https://jsfiddle.net/axsLwm24/1/

UPDATE.https://jsfiddle.net/jxwfvb0h/

Answer 1

[Роман Дворянов]

Для этого вам нужно знать какой из элементов текущий, например элемент с классом cost__elem--current, тогда вы можете вешать на все до него класс --success

const items = Array.from(document.querySelectorAll('.cost__elem'));

for (let i = 0; i < items.length; i++) {
  if (!items[i].className.includes('cost__elem--current')) {
    items[i].classList.add('cost__elem--success');
  } else {
    return;
  }
}

Comments

[tkachenkoaanna097]

Роман Дворянов, понимаю. но как его тут правильно добавить? слайды меняются
но класс у активного итема сейчас не будет меняться
или нужно по другому слайдер делать?

[Роман Дворянов]

tkachenkoaanna097, вам в любом случае нужен активный элемент, без активного элемента не узнать какие шаги пройдены, в слайдере активный тот, чей индекс меньше следующего на один или больше предыдущего)

[Роман Дворянов]

tkachenkoaanna097, как вы в коде понимаете, что вы находитесь на третьем или 4-ом шаге?

[tkachenkoaanna097]

Роман Дворянов, понимаю нужен класс
вот добавила
потом добавила ваш код - не работает
https://jsfiddle.net/8a6u41cd/

[Роман Дворянов]

tkachenkoaanna097, мой код не так работает

Поясню

const elems = Array.from(document.querySelectorAll('.cost__elem'));

  for (let i = 0; i < elems.length; i++) {
    if (!elems[i].className.includes('cost__elem--success')) {  // В моем примере тут указан текущий шаг, а не пройденый, как в вашем коде, с этим условием любой не пройденый становится пройденый и цикл прекращается, так как условия написано, что если не встречается success то делается success, в моем коде ошибка, цикл проходит один раз и выходит. 
      elems[i].classList.add('cost__elem--success');
     
      return;
    }
  }

Вам все еще нужно знать текущий шаг, грубо говоря в вашем уравнении x * y = z неизвестны ни x, ни y, ни z, поэтому они могут оказаться любыми

В ответе немного напутал условие, в примере цикл работал только один раз.

Исправленный вариант (в ответе тоже исправлю)

const elems = Array.from(document.querySelectorAll('.cost__elem'));

  for (let i = 0; i < elems.length; i++) {
    if (!elems[i].className.includes('cost__elem--current')) { 
      elems[i].classList.add('cost__elem--success');
    } else {
      return;
    }
  }

Если вам неизвестно какой текущий шаг, сделайте его случайным

const elems = Array.from(document.querySelectorAll('.cost__elem'));

const randomItemId = Math.floor(Math.random() * elems.length);
elems[randomItemId].classList.add('cost__elem--current'');

А теперь случайный + прошедшие:

const elems = Array.from(document.querySelectorAll('.cost__elem'));

const randomItemId = Math.floor(Math.random() * elems.length);
elems[randomItemId].classList.add('cost__elem--current');

for (let i = 0; i < elems.length; i++) {
    if (!elems[i].className.includes('cost__elem--current')) { 
      elems[i].classList.add('cost__elem--success');
    } else {
      return;
    }
  }
}

[Роман Дворянов]

tkachenkoaanna097,

Вот так работает со случайным текущим шагом, просто когда будете знать текущий, замените случайный на текущий

function calculator() {

  var currentIndex = 0,
      items = $('.cost__track div'),
      itemAmt = items.length;

  function cycleItems() {
    var item = $('.cost__track div').eq(currentIndex);
    items.hide().removeClass('active');;
    item.css('display','inline-block').addClass('cost__item--active');
  }

  $('.cost__btn-next').click(function() {
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
      currentIndex = itemAmt - 1;
    }
    cycleItems();
  });

  $('.cost__btn-prev').click(function() {
    currentIndex -= 1;
    if (currentIndex < 0) {
      currentIndex = 0;
    }
    cycleItems();
  });

  const elems = Array.from(document.querySelectorAll('.cost__elem'));

  const randomItemId = Math.floor(Math.random() * elems.length);
  elems[randomItemId].classList.add('cost__elem--current');

  for (let i = 0; i < elems.length; i++) {
    if (!elems[i].className.includes('cost__elem--current')) { 
      elems[i].classList.add('cost__elem--success');
    } else {
      return;
    }
  }
}

calculator();

[tkachenkoaanna097]

Роман Дворянов, все равно не хочет
вставила букву в букву ваш код
https://jsfiddle.net/bpvwds9r/

[Роман Дворянов]

tkachenkoaanna097, работает, пообновляйте страницу, чтоб увидеть разницу (можно и Run запускать несколько раз, без перезагрузки страницы)

[tkachenkoaanna097]

Роман Дворянов, так а разве шаг всегда статичен? я делаю клик вперед - назад
ничего не меняется

[Роман Дворянов]

tkachenkoaanna097, сделайте не статичным, вопрос был в том как добавлять классы итемам в зависимости от пройденных шагов, я написал рабочий пример, который явно показывает как добавлять классы итемам в зависимости от пройденных шагов, в примере вашего кода я не понимаю как узнать какой из шагов пройден, я не знаю зависит ли карусель с текстом от пройденных шагов и должна ли зависить, если должна подставляйте в пример нужные переменные, согласно вашей задаче. Если это нужно делать по клику, вынесите пример в функцию и вызывайте ее при смене шага

[tkachenkoaanna097]

Роман Дворянов, вот делаю как Вы говорите. срабатывает только первый клик
https://jsfiddle.net/rmLtvk6o/

шаг я получаю в дата атрибуте

[Роман Дворянов]

tkachenkoaanna097, нужно передавать в функции текущий элемент

Я пригляделся и немного упростил, мне кажется я понял как вам нужно, и если это так, то вот рабочий вариант, без current, увидел currentIndex, его хватит

function calculator() {

  var currentIndex = 0,
      items = $('.cost__track div'),
      itemAmt = items.length,
      btnprev = $('.cost__btn-prev'),
      btnnext = $('.cost__btn-next');


  function cycleItems() {
    var item = $('.cost__track div').eq(currentIndex);
    items.hide().removeClass('active');;
    item.css('display','inline-block').addClass('cost__item--active');
  }

  btnnext.click(function() {
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
      currentIndex = itemAmt - 1;
    }
    cycleItems();
    checkBtns();
    count(currentIndex);
  });

  btnprev.click(function() {
    currentIndex -= 1;
    if (currentIndex < 0) {
      currentIndex = 0;
    }
    cycleItems();
    checkBtns();
    count(currentIndex);
  });

  const checkBtns = () => {
    btnprev.prop('disabled', currentIndex === 0);
    btnnext.prop('disabled', currentIndex === itemAmt-1);
  }

  checkBtns();
  console.log(currentIndex);

  function count(currentId){
    const elems = Array.from(document.querySelectorAll('.cost__elem'));
    const randomItemId = document.querySelector('.cost__item--active').dataset.count;
    console.log(currentId);

    for (let i = 0; i < elems.length; i++) {
      if (i < currentId) { 
        elems[i].classList.add('cost__elem--success');
      } else {
        return;
      }
    }
  }
}

calculator();

[tkachenkoaanna097]

Роман Дворянов, спасибо огромное. Вы правильно все поняли!))
только не подскажете как эту часть переделать на jquery?

function count(currentId){
    const elems = Array.from(document.querySelectorAll('.cost__elem'));
    const randomItemId = document.querySelector('.cost__item--active').dataset.count;
    console.log(currentId);

    for (let i = 0; i < elems.length; i++) {
      if (i < currentId) { 
        elems[i].classList.add('cost__elem--success');
      } else {
        return;
      }
    }
  }

[Роман Дворянов]

tkachenkoaanna097 С жиквери можно и не заморачиваться с функцией

Можно просто добавить эту строчку в функцию btnnext

$('.cost__elem').eq(currentIndex - 1).addClass('cost__elem--success');

Весь код выглядит так

function calculator() {

  var currentIndex = 0,
      items = $('.cost__track div'),
      itemAmt = items.length,
      btnprev = $('.cost__btn-prev'),
      btnnext = $('.cost__btn-next');


  function cycleItems() {
    var item = $('.cost__track div').eq(currentIndex);
    items.hide().removeClass('active');;
    item.css('display','inline-block').addClass('cost__item--active');
  }

  btnnext.click(function() {
    currentIndex += 1;
    if (currentIndex > itemAmt - 1) {
      currentIndex = itemAmt - 1;
    }
    
    $('.cost__elem').eq(currentIndex - 1).addClass('cost__elem--success');
    cycleItems();
    checkBtns();
  });

  btnprev.click(function() {
    currentIndex -= 1;
    if (currentIndex < 0) {
      currentIndex = 0;
    }
    cycleItems();
    checkBtns();
  });

  const checkBtns = () => {
    btnprev.prop('disabled', currentIndex === 0);
    btnnext.prop('disabled', currentIndex === itemAmt-1);
  }

  checkBtns();
}

calculator();

[Роман Дворянов]

Просто года 3 уже jquery не трогал, не сразу сообразил

[tkachenkoaanna097]

Роман Дворянов, я просто так пробовала

function count(currentId){
    const elems = $('.cost__elem');
    const randomItemId = $('.cost__item--active').data('count');
    console.log(currentId);
    elems.each((i, el) => {
      const $el = $(el);
      if (i < currentId){
        $el.addClass('cost__elem--success')
      }
      $el.removeClass('cost__elem--success')
    });
 }

но что -то не работает

[tkachenkoaanna097]

Роман Дворянов, Просто года 3 уже jquery не трогал, не сразу сообразил

-------------------
ого ) немало

[Роман Дворянов]

tkachenkoaanna097,
Вот тут вы сначала вешаете класс, а потом его же снимаете

if (i < currentId){
        $el.addClass('cost__elem--success')
      }
      $el.removeClass('cost__elem--success')

[tkachenkoaanna097]

Роман Дворянов, спасибо огромное! просто нету слов))

[Роман Дворянов]

tkachenkoaanna097, кстати, у вас текст в кнопках местами перепутан, как мне кажется) На здоровье, хорошо когда можно не сложным способом расшарить знания, пользуюсь этим при любом удобном случае