jQuery: if 和 else if 语句与 &&?答案

【问题标题】：jQuery: if and else if statements with &&?jQuery: if 和 else if 语句与 &&?
【发布时间】：2016-02-01 11:32:10
【问题描述】：

我正在尝试使用 jQuery 创建一个 if 和 else if 语句，我将在 if 和 else if 语句中有两个条件，所以我也在使用 &&。

但是，每次我在代码中使用 if 和 else if 时，我的代码都会停止工作，我无法弄清楚为什么会一直发生这种情况。

为了更好地解释这一点，我创建了这个FIDDLE

有问题的代码是这样的：

    if ($button.text() == "+" && parseFloat(oldValue) == parseFloat(maximum)) {
    alert("You cannot do that");
    }else if($button.text() == "+" && parseFloat(oldValue) > parseFloat(maximum)){
.........................

如果我把上面的代码改成：

    if ($button.text() == "+") {
.........................

一切正常，但使用 if 和 else if 语句，似乎没有任何效果，我也没有在 consul 中看到任何错误。

有人可以就这个问题提出建议吗？

我有什么遗漏的吗？

任何帮助将不胜感激。

编辑：

根据一些答案，我已经编辑了我的代码，但我仍然有一个小问题！

问题是输入和剩余更改的数量，即使oldValue >= maximum。这是FIDDLE

【问题讨论】：

当旧值小于最大值时会发生什么？也许您应该在第一个条件parseFloat(oldValue) <= parseFloat(maximum)中使用小于或等于？
提示：在控制台中查看为data-max生成的HTML。
@Pete，如果 oldValue 小于最大值，则代码应该像没有 if 语句一样工作。但是当最大值 == oldvalue 时，应该弹出错误/警报.. 如果有意义的话。
@rooz，我已经修改了你的小提琴，所以它可以向你展示你在 if 语句中的结束位置 - 它正在按我的预期工作：jsfiddle.net/m5oobxrq/2。（最多给出 10 个）。看起来您正在进入“-”按钮点击可能性
@rooz，请在下面测试我的解决方案，它是否按预期工作？ ;)

标签： jquery

【解决方案1】：

您的条件都是错误的-您没有涵盖按下+ 按钮的所有可能性-仅当它等于最大值或大于最大值时。

正如你没有说如果数字小于最大值会发生什么，当你在 0 处按下加号时，它开始小于最大值（我猜最大值大于 0），所以你的逻辑是按下减号按钮（if 的 else 部分），它不会做任何事情，因为你不能小于 0。

因此，即使您单击加号，它也会触发减号事件。

我已经修改了您的 if 语句，以使您的 + 和 - 分开：

if ($button.text() == "+") {
  // logic for + button press only
  if (parseFloat(oldValue) >= parseFloat(maximum)) {        
    alert("You cannot do that");
  } else {
    var newVal = parseFloat(oldValue) + 1;
    $('#remaining').html(parseFloat(entries) - 1);


    if (entries == 0) {
      //alert("You have no entries left!");


      //$('.continue').prop('disabled', true);
      alert("You have 0 entries left!");
      $('#remaining').html(0);
      //$('.continue').prop('disabled', true);
      var newVal = parseFloat(oldValue);
      //alert(newVal);

    }
  }
} else {  
  // logic for - button press only goes in the else
  // Don't allow decrementing below zero
  if (oldValue > 0) {
    var newVal = parseFloat(oldValue) - 1;
    $('#remaining').html(parseFloat(entries) + 1);

  } else {
    newVal = 0;
  }
}

Updated fiddle

如果您想保留 else if 语句，请尝试以下操作：

 if ($button.text() == "+" && parseFloat(oldValue) >= parseFloat(maximum)) {
    // this is invalid range for "+"
 } else if ($button.text() == "+" && parseFloat(oldValue) < parseFloat(maximum)) {
   // this is valid and covers off the rest every eventuality of your plus button
 } else {
   // this will be your minus button logic
 }

【讨论】：

$button 在我们运行您的示例时未定义；)
@miguelmpn，抱歉，不应该是 sn-p，因为我没有费心将 html 粘贴到
@Pete，根据您对我有很大帮助的回答，我稍微更改了代码。但是我还有一个小问题！您能否查看我的 EDIT 和我添加到问题中的新 Fiddle 并就该问题提出建议？
我认为你错过了第二个 else if 所以它正在创建一个全新的 if 而不是 else if
@Pete，不，我从第二个语句中删除了 else。代码在第二个语句中与 else if 的行为很奇怪。

【解决方案2】：

我还是有点困惑，但我想我已经修复了你的代码，请在FIDDLE 中查看我的解决方案我使用了switch 来简化......

$(function() {

  $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

  $(".button").on("click", function() { 
    var $button  = $(this);
    var oldValue = $button.parent().find("input").val();
    var maximum  = $button.parent().find("input").attr("data-max");
    var entries  = $('#remaining').html();

    switch($button.text()) {
        case '+':
            if(entries == 0){
              alert("You have no entries left!");
              var newVal = parseFloat(oldValue);
            }else{
              var newVal = parseFloat(oldValue) + 1;
              $('#remaining').html(parseFloat(entries) - 1);
            }
            break;

        case '-':
            if (oldValue > 0) {
              var newVal = parseFloat(oldValue) - 1;
              $('#remaining').html(parseFloat(entries) + 1);
            } else {
              alert("You cannot do that");
              newVal = 0;
            }
            break;
    }

    $button.parent().find("input").val(newVal);
  });

});

【讨论】：