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

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

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

回答

相关问题