javascript - 如何将多个 jQuery 函数嵌套到可访问的变量中？

Question

$(".BtnTime1").click(function() {

  if ($(".BtnTime1").text() == "Green") {
    var timeIn = parseInt("122");
    $(".BtnTime1").text(timeIn);
  } else {
    $(".BtnTime1").text("Green");
  };

  $(".BtnTime2").click(function() {

    if ($(".BtnTime2").text() == "Green") {
      var timeOut = parseInt("3231");
      $(".BtnTime2").text(timeOut);
    } else {
      $(".BtnTime2").text("Green");
    };

    $(".timeDiff").html(timeOut - timeIn);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-condensed" border="1px">
  <thead>
    <tr>
      <td>Time-In Room</td>
      <td>Time-Out Room</td>
      <td>Time Difference</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button class="BtnTime1 btn-danger btn-block btn-outline-dark">Green</button></td>
      <td><button class="BtnTime2 btn-danger btn-block btn-outline-dark">Green</button></td>
      <td class="timeDiff"></td>
    </tr>
  </tbody>
</table>

嗨，我有一些带有两个函数的 jQuery 代码。

该函数将调用类“.BtnTime1”或“.BtnTime2”。

当单击/切换 HTML 按钮时，它将显示一个数值，然后减去两个变量以计算出两个字段之间的数字差异。

数字差异将填充在类“.timeDiff”的 HTML 元素内。

代码可以工作，但是切换 HTML 按钮可能会出现问题，我相信这是因为函数没有正确嵌套，我需要在一个范围内可以访问变量。

如何清理此代码以避免按钮切换问题以及函数是否正确嵌套？

非常感谢!

Answer 1

更简洁的方法是在函数外部初始化变量并且不要嵌套函数。我做了一些修改以获得准确的结果 还有一件事，在这种情况下最好使用 ID 而不是类

var timeIn = '';
var timeOut = '';
$(".BtnTime1").click(function() {

  if ($(".BtnTime1").text() == "Green") {
    timeIn = parseInt("122");
    $(".BtnTime1").text(timeIn);
  } else {
    $(".BtnTime1").text("Green");
  };
});



$(".BtnTime2").click(function() {

  $(".timeDiff").html('');
  if ($(".BtnTime2").text() == "Green" && $(".BtnTime1").text() != "Green") {
    timeOut = parseInt("3231");
    $(".BtnTime2").text(timeOut);
    $(".timeDiff").html(timeOut - timeIn);
  } else {
    $(".BtnTime2").text("Green");
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-condensed" border="1px">
  <thead>
    <tr>
      <td>Time-In Room</td>
      <td>Time-Out Room</td>
      <td>Time Difference</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button class="BtnTime1 btn-danger btn-block btn-outline-dark">Green</button></td>
      <td><button class="BtnTime2 btn-danger btn-block btn-outline-dark">Green</button></td>
      <td class="timeDiff"></td>
    </tr>
  </tbody>
</table>