Question

自从昨晚以来我一直试图解决这个问题但仍然没有运气。我非常需要帮助。情况就是这样：我有4个可点击的图像，每个图像都在我的html文件上有一个clickCount文本框。 clickCount文本框将显示单击图像的次数。我得到了前两张图像，但是当我点击第三张图像时，第二张图像上的clickCount文本框会递增。这是我的代码：

    <script> 
  var targetId="";

 $(".foods").click(function(event) {
  if (event.target.id=="img1"){
  targetId="img1clickCount";
    addOrders();}

else if(event.target.id="img2"){
  targetId="img2clickCount";
    addOrders();    }

else if(event.target.id="img3"){
  targetId="img3clickCount";
    addOrders();    }

else if(event.target.id="img4"){
  targetId="img4clickCount";
    addOrders();    }

}); });

function addOrders(){
document.getElementById(targetId).value=parseInt(document.getElementById(targetId).
    value)+1;
}
  </script>

<body>
<table cellpadding=0 cellspacing=0 border=1 height=330 style="margin-left:18px">
<tr>

 //Images
<td><img src="gangjeong.png" width="100" style="cursor:pointer" id="img1"                              
class="foods"></td>
<td><img src="daktoritang.png" width="100" style="cursor:pointer" id="img2"
class="foods"></td>
<td><img src="tangsuyuk.png" width="100" style="cursor:pointer" id="img3"      
class="foods"></td>
<td><img src="tangsuyuk.png" width="100" style="cursor:pointer" id="img4"      
class="foods"></td>
<tr height="5">

//Textboxes
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img1clickCount">
</td>
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img2clickCount">
</td>
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img3clickCount">
</td>
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img4clickCount">
</td>
</tr></table>

Answer 1

第一个条件;

if (event.target.id=="img1"){      // Compares

第二个条件;

if (event.target.id="img2"){       // Uses = (ie assigns, not compares)

Answer 2

在其他条件下检查 ==

成功

$(".foods").click(function(event) {
  if (event.target.id=="img1") {
    targetId="img1clickCount";
    addOrders();
  }
  else if(event.target.id=="img2") {
    targetId="img2clickCount";
    addOrders();
  }
  else if(event.target.id=="img3"){
    targetId="img3clickCount";
    addOrders();
  }
  else if(event.target.id=="img4"){
    targetId="img4clickCount";
    addOrders();
  }
})

Answer 3

您应该使用===进行比较

else if(event.target.id === "img2"){

Answer 4

您需要使用==代替=进行比较，前者是比较运算符，后者是赋值运算符

Answer 5

像这样重写你的代码，它更简单 -

$(".foods").click(function(event) {
    addOrders($(this).attr('id') + 'clickCount');
});

function addOrders(targetId){
    var value = parseInt(
        $('#' + targetId).val()) + 1;
    $('#' + targetId).val(value);
}

Answer 6

其他人已经指出你的= / ==拼写错误。

但是不是所有if / then / elseif，而是使用DRY方法：

targetId = this.id + clickCount;
addOrders();

请注意，在使用jQuery时不需要使用event.target，它会将this绑定到所有事件处理程序中的目标元素。

我还建议不要设置全局变量，而是将targetId作为参数传递给addOrders。

JQuery if else语句在第二个条件下停止

6 个答案: