Question

我正在从直接javascript切换到jQuery以在同一页面上处理我的计时器的不同实例。我还在学习两种语言的基础知识，并且发现自己对此感到困惑。当我创建一个新的计时器时，输入值，然后按开始它告诉我在创建秒函数中没有定义计时器，但是在触发createSeconds之前它在startTimer函数中注销。我在这里错过了什么？谢谢。

<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<title>Kitchen Timer</title>
<link rel="stylesheet" href="timer-css.css" />
</head>
<body>
  <h1>Countdown Timer</h1>
  <div id="timers">
  </div>

  <div id="create">
    <button id="createButton">create new timer</button>
  </div>

  <div class="timer_template">
    <div class="inputFields">
      <input class="hours" type="text" value="" name="hours" placeholder="Hours" maxlength="2"> <span>:</span>
      <input class="minutes" type="text" value="" name="min" placeholder="Minutes" maxlength="2"> <span>:</span>
      <input class="seconds" type="text" value="" name="seconds" placeholder="Seconds" maxlength="2">
    </div>
    <div class="controls">
      <button class="startButton">Start</button>
      <button class="resetButton hidden">Reset</button>
      <button class="pauseButton hidden">Pause</button>
    </div>
  </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="application/javascript">

  var hourIn = document.querySelector(".hours");
  var minuteIn = document.querySelector(".minutes");
  var secondsIn = document.querySelector(".seconds");
  var startButton = document.querySelector(".startButton");
  var resetButton = document.querySelector(".resetButton");
  var pauseButton = document.querySelector(".pauseButton");
  var inputs = ['.hours', '.minutes', '.seconds'];
  var seconds;
  var interval;
  var running = false;
  startButton.addEventListener("click", startTimer);
  pauseButton.addEventListener("click", pauseTimer);
  resetButton.addEventListener("click", resetTimer);




  var $timer = $('.timer_template');
  var createNew = document.getElementById("createButton");

  createNew.addEventListener('click', function() {
    $timer.clone(true, true).toggleClass('timer_template timer').appendTo("#timers");
  });

  $('body').on('click', '.startButton', function(e) {
    // e.target is the button we click on.
    // e is the event and calling .target get's the thing that was clicked on
    var $this = $(e.target);
    var $this_timer = $this.parents('.timer');
    startTimer($this_timer);
  });

 // input fields only accept numbers
  // document.querySelector(".inputFields").addEventListener("keypress", function (evt) {
  //   if (evt.which < 48 || evt.which > 57)
  //   {
  //     evt.preventDefault();
  //   }
  // });

  function startTimer(timer) {
    // console.log(timer)
    console.log(timer.find('.hours').val())
    console.log(timer.find('.minutes').val())
    console.log(timer.find('.seconds').val())
    if (timer.find('.hours').val() == '' && timer.find('.minutes').val() == '' && timer.find('.seconds').val() == '') {
      alert("Enter a time to begin");
    } else if (!timer.hasClass('running')) {
      timer.addClass('');
      doCountDown();
      toggleInputs(inputs, true);
      showHide();
    }
  }

  function showHide() {
    resetButton.classList.toggle("hidden");
    pauseButton.classList.toggle("hidden");
    startButton.classList.toggle("hidden");
  }

  // Toggle input fields from disabled to enabled
  // @params Array, Boolean
  function toggleInputs(elements,toggle) {
    if (toggle) {
      return elements.forEach(function (elem) {
      document.querySelector(elem).setAttribute('disabled', toggle);
      });
      } else {
        return elements.forEach(function (elem) {
        document.querySelector(elem).removeAttribute('disabled', toggle);
        });
      }
  }

  function createSeconds() {
    console.log(secondsIn)
    seconds = parseInt(timer.find('.seconds').val() || 0) + (parseInt(timer.find('.minutes').val() || 0) * 60) + (parseInt(timer.find('.hours').val() || 0) * 3600);
  }

  function resetTimer() {
    window.clearInterval(interval);
    running = false;
    emptyString();
    alertDisplay.textContent = '';
    toggleInputs(inputs, false);
    showHide();
  }

  function pauseTimer() {
    if (running) {
      window.clearInterval(interval);
      running = false;
      pauseButton.textContent = "Continue";
    } else {
      running = true;
      doCountDown();
      pauseButton.textContent = "Pause";
    }
  }

  function doCountDown() {
    createSeconds();
    interval = setInterval(watchCountDown, 1000);

  }

  function watchCountDown() {
    seconds--;
    if (seconds < 0) {
      clearInterval(interval);

      timerAlert();
    } else {
      var h = parseInt(parseInt(seconds / 60) / 60) % 24;
      var m = parseInt(seconds / 60) % 60;
      var s = parseInt(seconds) % 60;
      hourIn.value = h;
      minuteIn.value = m;
      secondsIn.value = s;

    }
  }

  function timerAlert() {
    toggleInputs(inputs, false);
    running = false;
    showHide();
  }

  function emptyString() {
    hourIn.value = '';
    minuteIn.value = '';
    secondsIn.value = '';
  }

</script>
</body>
</html>

Answer 1

要在javascript中使用变量，需要将其作为参数传递给函数（例如function createSeconds(timer) {），或者在该函数的范围内或在外部声明（例如var timer = foo;）范围。在您的情况下，您既不会将timer作为参数传递，也不会在createSeconds或外部范围内声明它。

Answer 2

对于初学者来说，jQuery没有在点击处理函数中找到一个元素：

<div id="myRepeater_myControl_4_myPanel_4">
    <div id="myRepeater_myControl_4_myPanel_4">
    <input name="myRepeater$ctl04$myControl$myText" type="text" value="hello world" id="myRepeater_myControl_4_myText_4">
</div>
 ,
<input name="myRepeater$ctl04$myControl$myText" type="text" value="hello world" id="myRepeater_myControl_4_myText_4">

看起来父类应该是.timer_template。

模板注入导致var未定义

2 个答案: