两个相同的元素需要执行相同的功能，但存在冲突

Two identical elements needing to do the same function, but are conflicting

本文关键字：功能 执行 冲突 存在 元素 两个      更新时间：2023-09-26

所以我有一个加号/减号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')。这样可以确保找到正确的输入进行更新。

这是我从你的原件中提取的一支工作代码笔。

此外，您不应该使用eval。有更好的方法可以将字符串转换为int。以下是一个很好的解释，解释为什么eval是个坏主意。

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

扩展tokyovariable的答案

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

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

忘记eval。您可以使用$.isNumeric来检查它是否是一个数字。

这是一个简化版本：

$（函数（）{$（'.left'）.on（'click'，function（）{calculateValue（this，-1，-1）；})；

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

})；

函数getInput（thisDiv）{return（$（thisDiv）.closest（'.doors'）.find（':input'））；}

函数calculateValue（thisDiv，op，defaultValue）{var elem=getInput（thisDiv）；var值=elem.val（）；elem.val（！$.isNumeric（value）？defaultValue:（parseInt（value）+op））；}

$(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) );
}
.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;
}
<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>

相关文章：