javascript - 使用 Button 选择下一个 div 并更改值

Question

我有 4 个 div 元素，每个元素都有自己的值，例如 0。我有一个带有加号和减号的按钮，可以更改每个框中的值。我还有一个设置的下一个按钮，所以你可以对下一个框做同样的事情。

我面临的问题是如何选择下一个 div 并使用相同的加号和减号按钮更改值，然后选择下一个 div 并执行相同，直到你结束。然后它必须返回到第一个 div。这是我的代码:

<div class="code_div">
    <div class="code_area">
        <p id="number1">00</p>
    </div>
    <div class="code_area2">
        <p id="number2">00</p>
    </div>
    <div class="code_area3">
        <p id="number3">00</p>
    </div>
    <div class="code_area4">
        <p id="number4">00</p>
    </div>

var value = 0;
var plus = false;
var minus = false;

$(document).ready(function() {
    $('#set_next').click(function() {
    });

    $('#minus').click(function() {
        minus = false;
        plus = true;
        if (plus == true) {
            value -= 5;
        }
        displayValue()
    });

    $('#plus').click(function() {
        minus = true;
        plus = false;
        if (minus == true) {
            value += 5;
        }
        displayValue() 
    });
});

function displayValue() {
    document.getElementById("number1").innerHTML = value;
}

谁能帮帮我？

Answer 1

保持简单。你有一个 div 列表，所以使用 list反而。即使您想保留原始标记，这也应该让您了解如何实现这一点。

var $items = $('ul li'),
    qtItems = $items.length,
    activeItem = 0;

$('#setnext').click(function () {
  $items.removeClass('active').eq(++activeItem % qtItems).addClass('active');
});
                   
$('#plus, #minus').click(function () {
  var currvalue = $items.eq(activeItem % qtItems).text();
  this.id === 'plus' ? currvalue++ : currvalue--;
  $items.eq(activeItem % qtItems).text(currvalue);
});

ul {
  list-style: none;
}

ul li {
  display: inline-block;
  margin: 0 1em;
  padding: 1em;
  background-color: green;
  opacity: .5;
}

li.active {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">0</li>
  <li>0</li>
  <li>0</li>
  <li>0</li>
</ul>

<button id="setnext">set next</button>
<button id="plus">plus</button>
<button id="minus">minus</button>

但是，如果您不能简化您的标记，这里是另一个 simple solution使用您的原始 html。
如您所见，您不需要所有这些类和 ID。