使用 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。

Answer 2

var value = 0;
var plus = false;
var minus = false;
var index=1;
$( document ).ready(function() {

$('#set_next').click(function() {
index++;
//update
$("#number"+index).css("color","blue");
if(index==5){
index=1;
}
});

 $('#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("number"+index).innerHTML = value;
}

Answer 3

虽然您的代码需要大量润色（如果您愿意，我可以为您提供更简洁的方法） https://jsfiddle.net/cbw4zc55/ 这些方面的东西？ html代码：

<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>
    <button id="set_next">set next</button>
    <button id="minus">minus</button>
    <button id="plus">plus</button>

javascript：

var current = 1;
    var max = 4;

    var value = 0;
    var plus = false;
    var minus = false;
    $( document ).ready(function() {

    $('#set_next').click(function() {
        if( current < max )
        {
            current+=1;
        }
        else
        {
            current = 1;
        }
     value = parseInt($("#number"+current).text());
    });

     $('#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("number"+current).innerHTML = value;

    }

编辑： 请注意，每次将焦点更改为新元素时，都需要重新计算当前元素值（除了所选答案也很完美）