Question

所以我有一个加/减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)
    }
}

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

Answer 2

扩展tokyovariable的答案

找到输入元素的最简单方法是：

$(thisDiv).closest('.doors').find(':input');

忘掉了eval。您可以使用$.isNumeric检查它是否为数字。

这是一个简化版本：

$（函数（）{ $（＆＃39; .left＆＃39;）。on（＆＃39; click＆＃39;，function（）{ calculateValue（this，-1，-1）; }）;

$('.right').on('click',function() {
    calculateValue(this, +1, 1);
});

}）;

function getInput（thisDiv） { return（$（thisDiv）.closest（＆＃39; .doors＆＃39;）。find（＆＃39;：input＆＃39;））; }

function calculateValue（thisDiv，op，defaultValue） { var elem = getInput（thisDiv）; var value = elem.val（）; elem.val（！$。isNumeric（value）？defaultValue：（parseInt（value）+ op））; }

＆＃13;

$(function(){
	$('.left').on('click',function() {
		calculateValue(this, -1, -1);
	});

	$('.right').on('click',function() {
		calculateValue(this, +1, 1);
	});
});

function getInput(thisDiv)
{
  return ($(thisDiv).closest('.doors').find(':input'));
}

function calculateValue(thisDiv, op, defaultValue)
{
  var elem = getInput(thisDiv);
  var value = elem.val();
  elem.val(!$.isNumeric(value) ? defaultValue : (parseInt(value) + op) );
}

＆＃13;

.miniDoor {
  font-style: bold;
  height:30px;
  width:30px;
  background:#333;
  padding:10px;
  font-size:20px;
  text-align:center;
  color:#fff;
  line-height:1.5em;
 /* transition: all .3s ease-in-out;*/
  transition:all .3s;
  transition-timing-function: cubic-bezier(0,0,0,1);
  transform-style: preserve-3d;
  float:left;
}

.miniDoor.right {
    -webkit-transition: background .7s;
    -moz-transition: background .7s;
    transition: background .7s;
}

.miniDoor.right:hover {
  background: #6B6A6A;
  background: rgba(107, 106, 106, 0.8);
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

.miniDoor.left {
    -webkit-transition: background .7s;
    -moz-transition: background .7s;
    transition: background .7s;
}

.miniDoor.left:hover {
  background: #6B6A6A;
  background: rgba(107, 106, 106, 0.8);
  -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93);
  color: #fff;
}

#middle1, #middle2{
  border:0;
  height:50px;
  width:75px;
  background:#333;
  padding:10px;
  font-size:20px;
  text-align:center;
  color:#fff;
  line-height:1.5em;
 /* transition: all .3s ease-in-out;*/
  transition:all .3s;
  transition-timing-function: cubic-bezier(0,0,0,1);
  transform-style: preserve-3d;
  float:left;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

＆＃13;

两个相同的元素需要做同样的功能，但是相互冲突

2 个答案: