Как изменить номер класса при клике на кнопку?

Question

Как изменить номер класса при клике на кнопку plus/minus. То есть надо сделать так чтобы при клике на plus номер класса изменялся на +1 а при клике на minus -1. И сделать так чтобы максимально ограничить до 10.

.container{
display:flex;
max-width:80px;
width:100%;
justify-content: space-between;
}
.plus-1 {
  width: 30px;
  height: 30px;
  border: 1px solid red;
  background-color: grey;
}
.minus-1 {
  width: 30px;
  height: 30px;
  border: 1px solid red;
  background-color: grey;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>
  <title>фтшь</title>
</head>

<body>
<div class="container">
  <div class="plus-1"></div>
  <div class="minus-1"></div>
</div>
</body>
</html>

Answer 1

const MAX_VALUE = 10;

let plusValue = 1;
let minusValue = 1;

document.querySelector('#plus').addEventListener('click', (e) => {
  const target = e.target;
  plusValue = plusValue >= MAX_VALUE ? 1 : ++plusValue;
  target.className = `plus-${plusValue}`
});

document.querySelector('#minus').addEventListener('click', (e) => {
  const target = e.target;
  minusValue = minusValue >= MAX_VALUE ? 1 : ++minusValue;
  target.className = `minus-${minusValue}`
});

.container {
  display: flex;
  max-width: 80px;
  width: 100%;
  justify-content: space-between;
}

#plus {
  width: 30px;
  height: 30px;
  border: 1px solid red;
  background-color: grey;
}

#minus {
  width: 30px;
  height: 30px;
  border: 1px solid red;
  background-color: grey;
}

.plus-1 {
  width: 30px;
  height: 30px;
  border: 1px solid red;
  background-color: grey;
}

.minus-1 {
  width: 30px;
  height: 30px;
  border: 1px solid red;
  background-color: grey;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>
  <title>фтшь</title>
</head>

<body>
  <div class="container">
    <div id="plus" class="plus-1"></div>
    <div id="minus" class="minus-1"></div>
  </div>
</body>

</html>

Answer 2

эммм...

let x = document.getElementById("x");
var q = document.getElementById("q");
function abc(w){
if(w == 0 || w == 11)
{
  q.value = (w == 0 ? 10 : 1);
  x.className = (w == 0 ? 10 : 1);
}else{x.className = w;}
}

<input
  id='q'
  type='number'
  min='0'
  max='11'
  value='5'
  onchange='abc(this.value);'
  />
<span id='x'>abc</span>

так сойдёт? :3

p.s. js пришлось цеплять только ради цикличности.

Answer 3

В коментариях я имел ввиду использование data-атрибутов, как показано ниже в примере. В атрибутах также можно указать минимальное и максимальное значение, шаг и любые другие необходимые данные.

document.querySelector('.container')
.addEventListener('click', function(event) {
    const target = event.target;
    const parent = target.parentNode;
    let counter = parseInt(target.dataset.counter, 10);
    const step = parseInt(parent.dataset.counterStep, 10);
    const minValue = parseInt(parent.dataset.counterMinValue, 10);
    const maxValue = parseInt(parent.dataset.counterMaxValue, 10);
    if(counter >= maxValue || counter <= minValue) {
      return;
    }
    target.dataset.counter = target.classList.contains('plus')
            ? counter + step
            : counter - step;
});

.container {
  display:flex;
  max-width:80px;
  width:100%;
  justify-content: space-between;
}
.container div {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid red;
}
.container div[data-counter]::after {
  content: attr(data-counter);
}
.container div[data-counter="1"] {
  background-color: rgba(0, 0, 0, 0.1);
}
.container div[data-counter="2"] {
  background-color: rgba(0, 0, 0, 0.15);
}
.container div[data-counter="3"] {
  background-color: rgba(0, 0, 0, 0.2);
}
.container div[data-counter="4"] {
  background-color: rgba(0, 0, 0, 0.25);
}
.container div[data-counter="5"] {
  background-color: rgba(0, 0, 0, 0.3);
}
.container div[data-counter="6"] {
  background-color: rgba(0, 0, 0, 0.35);
}
.container div[data-counter="7"] {
  background-color: rgba(0, 0, 0, 0.4);
}
.container div[data-counter="8"] {
  background-color: rgba(0, 0, 0, 0.5);
}
.container div[data-counter="9"] {
  background-color: rgba(0, 0, 0, 0.55);
}
.container div[data-counter="10"] {
  background-color: rgba(0, 0, 0, 0.6);
}
.container div[data-counter="0"] {
  background-color: rgba(80, 0, 0, 0.05);
}
.container div[data-counter="-1"] {
  background-color: rgba(80, 0, 0, 0.1);
}
.container div[data-counter="-2"] {
  background-color: rgba(80, 0, 0, 0.15);
}
.container div[data-counter="-3"] {
  background-color: rgba(80, 0, 0, 0.2);
}
.container div[data-counter="-4"] {
  background-color: rgba(80, 0, 0, 0.25);
}
.container div[data-counter="-5"] {
  background-color: rgba(80, 0, 0, 0.3);
}
.container div[data-counter="-6"] {
  background-color: rgba(80, 0, 0, 0.35);
}
.container div[data-counter="-7"] {
  background-color: rgba(80, 0, 0, 0.4);
}
.container div[data-counter="-8"] {
  background-color: rgba(80, 0, 0, 0.5);
}
.container div[data-counter="-9"] {
  background-color: rgba(80, 0, 0, 0.55);
}
.container div[data-counter="-10"] {
  background-color: rgba(80, 0, 0, 0.6);
}

<div class="container"
     data-counter-min-value="-10"
     data-counter-max-value="10"
     data-counter-step="1">
  <div class="plus" data-counter="1">+</div>
  <div class="minus" data-counter="1"></div>
</div>

БЛОГ НА HUSL

Как изменить номер класса при клике на кнопку?

Ответы (3 шт):