兩個相同的元素需要執行相同的功能，但存在沖突
[英]Two identical elements needing to do the same function, but are conflicting
問題描述
所以我有一個加/減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)
}
}
2 個解決方案
解決方案1
5 已采納 2014-11-06 01:04:13
您在兩個地方使用#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
}
}
解決方案2
1 2014-11-06 09:57:29
擴展東京變量的答案
查找輸入元素的最簡單方法是：
$(thisDiv).closest('.doors').find(':input');
忘了評估。 您可以使用$.isNumeric來檢查它是否為數字。
這是一個簡化的版本：
$（function（）{$（'。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 value = 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>
如何使兩個相同的類對相同的 javascript function 以不同的方式工作？
[英]How do I make two identical classes work differently with the same javascript function?
識別兩個具有相同位置（索引）的 arrays 中的相同元素
[英]Identifying the identical elements in two arrays with same location(index)
為什么這兩個相同的基准在同一個瀏覽器但在兩個不同的平台上會有不同的結果？
[英]Why do these two identical benchmarks have different results on the same browser but with two different platforms?
如何使用常見的js函數為兩個div包含相同ID的元素？
[英]How to use common js function for two divs containig elements of identical ids?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.