JS добавить суффикс целое число и повернуть от 1 до 4

Question

Я должен изменить суффикс для класса .background-1 на .background-2 и т. Д. И после 4 он возвращается к 1. Как карусель.

Мой триггер - щелчок, и его можно увидеть ниже:

$('.arrow-next').click(function () {
        // Here should be the code
});

Answer 1

Динамическое решение с использованием Элемент # className , String # replace .

Идея состоит в том, чтобы получить элемент, получить полное имя className и динамически увеличивать число путем замены. со следующим номером (используя модуль по модулю, чтобы убедиться, что он не превышает максимальное количество доступных фонов).

* * * * * * * * * * * * * * * * * * * * * * * * * 100начать с 0.

const limit = 5;
$('.arrow-next').click(function() {
  const ele = $(".background").get(0);

  ele.className = ele
    .className
    .replace(
      /background-([0-9])/g, 
      (_, p1) => 'background-' + Math.max((Number(p1) + 1) % limit, 1)
    );
});

.background-1 {
  background-color: red;
}

.background-2 {
  background-color: blue;
}

.background-3 {
  background-color: pink;
}

.background-4 {
  background-color: green;
}

.background {
  height: 100px;
  width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="background toto background-1">

</div>

<button class="arrow-next">
  click me
</button>

Answer 2

Это будет делать ...

const $carousel = $('.carousel');
$('.arrow-next').click(function() {
  if ($carousel.classList.contains('background-1')) {
    $el.classList.remove('background-1');
    $el.classList.add('background-2');
  } else if ($carousel.classList.contains('background-2')) {
    $el.classList.remove('background-2');
    $el.classList.add('background-3');
  } else if ($carousel.classList.contains('background-3')) {
    $el.classList.remove('background-3');
    $el.classList.add('background-4');
  } else if ($carousel.classList.contains('background-4')) {
    $el.classList.remove('background-4');
    $el.classList.add('background-1');
  }
});