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

JQuery if else statement stops at second condition

本文关键字：条件 第二个 if else 语句 JQuery      更新时间：2023-09-26

从昨晚开始，我一直在尝试解决这个问题，但仍然没有成功。我在这方面急需帮助。情况如下：我有4个可点击的图像，每个图像在我的html文件上都有一个点击计数文本框。单击计数文本框将显示图像被单击的次数。我让前两个图像工作，但当我单击第三个图像时，第二个图像上的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>

第一个条件；

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

第二种情况；

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

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

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

在其他条件下检查

使其

$(".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();
  }
})

您需要使用==而不是=进行比较，前者是比较运算符，后者是分配运算符

像这样重写代码，它要简单得多-

$(".foods").click(function(event) {
    addOrders($(this).attr('id') + 'clickCount');
});
function addOrders(targetId){
    var value = parseInt(
        $('#' + targetId).val()) + 1;
    $('#' + targetId).val(value);
}

其他人都已经指出了你的===打字错误。

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

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

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

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

相关文章：