所以我有一个加/减 div，当单击按钮时，它会增加或减少一个值。我的问题是，当我将其中两个放在一个页面上时，它们会相互冲突。
我该如何调整它们才不会发生冲突？
您可以在此处查看工作代码:http://codepen.io/maudulus/pen/yjnHv
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
$(function(){
$('.left').on('click',function() {
subtractInputValue(this)
});
$('.right').on('click',function() {
addInputValue(this)
});
});
function addInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(1)
} else {
$('#middle').val(eval(inputVal) +1)
}
}
function subtractInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(-1)
} else {
$('#middle').val(eval(inputVal) -1)
}
}
最佳答案
您在两个地方使用 #middle 作为 ID，ID 需要是唯一的(我将 ID 更新为唯一的东西，它们是任意的)。因此，jQuery 找到它看到的第一个 ID 并更新它，这就是为什么当您单击底部的 ID 时顶部的 ID 会更新的原因。一个简单的修复方法是在您想要更新值时使用 $(thisDiv).parent().children('input')。这样你就可以确保找到正确的输入来更新。
这是一个有效的 codepen that I forked of your original .
此外，您不应该使用 eval。有更好的方法来 convert a string into an int .这是一个good explanation as to why eval is a bad idea .
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="main.js"></script>
</head>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle1" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
<br><br><br><br><br><br><br>
<div class="doors">
<div class="miniDoor left">-</div>
<input id="middle2" placeholder="0"/>
<div class="miniDoor right">+</div>
</div>
$(function(){
$('.left').on('click',function() {
subtractInputValue(this)
});
$('.right').on('click',function() {
addInputValue(this)
});
});
function addInputValue(thisDiv) {
inputVal = $(thisDiv).parent().children('input').val()
if (inputVal == "") {
$(thisDiv).parent().children('input').val(1)
} else {
$(thisDiv).parent().children('input').val(eval(inputVal) +1) // change it here
}
}
关于javascript - 两个相同的元素需要执行相同的功能，但相互冲突，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26770001/