使用按钮选择下一个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;
}

有人能帮我吗？

- Julian Faul

---

加号和减号按钮在哪里？你能提供一个jsFiddle吗？ - Taleeb

抱歉，它们在这里......我会尝试快速创建一个JS fiddle。 - Julian Faul

<button id="plus" class="btn btn-primary btn-sm">加</button> <button id="set_next" class="btn btn-primary btn-sm">设置下一个</button> <button id="minus" class="btn btn-primary btn-sm">减</button> - Julian Faul

[链接]（http://jsfiddle.net/z4ukhvt4/） - Julian Faul

我不知道为什么我的加号和减号在JSFiddle上不起作用，但在我的电脑上却可以正常工作。 - Julian Faul

@JulianFaul，我刚刚在我的回答底部添加了一个使用您原始HTML的简单解决方案。 - Jose Rui Santos

Answer 1

保持简单。你有一组div列表，因此使用列表。即使你想保持原始标记，这也应该给出如何实现的想法。

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>

如果您无法简化标记，则可以使用这个简单的解决方案来使用原始的html。
正如您所看到的，您并不需要所有这些类和ID。

- Jose Rui Santos

---

真正优雅的部分是.eq(++activeItem % qtItems)，这是一种很好的跟踪焦点元素的方式。做得好。 - Marc Audet

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;
}

- Joseph Khella

---

是的，这个方法可行，我之前一直在尝试使用 .next 做其他的事情，但我觉得我把它搞得太复杂了... 但这个方法百分之百有效。非常感谢您的帮助。现在我下次就能做到了。 - Julian Faul

你会如何突出显示被选中的内容，只需将字体颜色变为蓝色？ - Julian Faul

@JulianFaul 欢迎，伙计，请在 click 函数的更新中检查，你可以使用 jQuery 实现。 - Joseph Khella

Answer 3

尽管你的代码需要很多改进（如果你想的话，我可以给你一个更简洁的方法），类似这样的东西吗？html代码：https://jsfiddle.net/cbw4zc55/

<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;

    }

编辑： 请注意，每次将焦点更改为新元素时，您需要重新计算当前元素的值（除此之外，选择的答案也非常完美）。

- Elentriel

---

这太棒了..我还是新手，所以不完全理解发生了什么..我会去查找parse int..另外，你怎么改变活动数字的颜色呢？我会尝试在('set_next')点击函数中添加和删除类.active，并使用属性(color:blue)。 - Julian Faul

如果你能指点我正确的方向，我会自己解决的。 - Julian Faul

$("#number"+current).closest("div").toggleClass("myactiveclass");为了从当前元素获取最近的 div，您可以使用 .closest(".code_area") ，假设所有元素都有 code_area 类而不是 code_area1 等。 toggleClass 将删除一个类（如果存在），或者添加一个类（如果不存在），因此在更改当前元素之前和之后调用 set_next 的 toggleClass，以从先前的元素中删除类并将其添加到当前元素中。然后将 CSS 添加到该类即可完成 :) - Elentriel

这样做将向包装元素添加一个类，使您可以相应地设置其样式。如果您想针对实际元素进行操作，请跳过.closest部分。 - Elentriel

太棒了，非常感谢你的帮助。同时也感谢所有帮助过我的人。 - Julian Faul