我有 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;
}
谁能帮帮我?
最佳答案
保持简单。你有一个 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。
关于javascript - 使用 Button 选择下一个 div 并更改值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33628992/