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

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

tok*_*ble 5

您#middle在两个地方使用ID作为ID,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
    }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，6 月前
查看次数：	131 次
最近记录：	11 年，6 月前