兩個相同的元素需要做相同的功能，但衝突

所以我有一個加/減divs，當按鈕被點擊時，將增加或減少一個值。我的問題是，當我將其中兩個放在一個頁面上時，它們會相互衝突。兩個相同的元素需要做相同的功能，但衝突

我怎樣才能調整這些，使他們不會衝突？

你可以看到這裏的工作代碼：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) 
    } 
}

來源

2014-11-06 maudulus

的eval（inputVal）是不好不好不好。有很多方法可以將字符串轉換爲數字。 parseInt，parseFloat，數字，榆樹加等 – epascarello 2014-11-06 01:11:12

好的，請注意採取的感謝 – maudulus 2014-11-06 01:31:07

您正在使用#middle在兩個地方的ID，這些ID必須是唯一的（我更新的ID，以獨特的東西，他們是任意）。所以，jQuery找到它所看到的第一個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 
    } 
}

來源

2014-11-06 01:04:13 tokyovariable

爲了延長tokyovariable的回答

最簡單的方式找到輸入元素是：

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

，忘記EVAL。您可以使用$.isNumeric來檢查它是否是一個數字。

這是一個簡化的版本： '左 '

$（函數（）{$ （）上（' 點擊'，函數（）{ calculateValue（這一點，-1，-1） ; }）;

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

}）; （$（thisDiv）.closest（'。doors'）。find（'：input'））;}這個函數返回一個數組， }

功能calculateValue（thisDiv，OP，默認值） { 變種ELEM = getInput（thisDiv）; var value = elem.val（）; （！$。isNumeric（value）？defaultValue：（parseInt（value）+ op））; }

$(function(){ 
 
\t $('.left').on('click',function() { 
 
\t \t calculateValue(this, -1, -1); 
 
\t }); 
 

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

 
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>

來源

2014-11-06 09:57:29 LeftyX

不知道$ .isNumeric，好！ – tokyovariable 2014-11-10 02:35:17

兩個相同的元素需要做相同的功能，但衝突

回答

相關問題