h3标签的监听器不起作用

Question

我有一个番茄钟，我分别遇到minBreak和plusBreak的监听器问题。 plusWork minWork jquery监听器工作得很好，但由于某种原因，minBreak和plusBreak的监听器不起作用。有人能告诉我为什么吗？这是代码（不要太介意设计太多......还没完成）

$(document).ready(function() {
  //variables
  var workTime = 2; //working time
  var breakTime = 10; //break time
  var seconds = 00;
  var minutes = workTime; //setting clock = to workTime
  var clockDisplay = document.getElementById("display");
  var counterId = 0;
  var state = "on";

  //start clock whenc button clicked
  $("#start").click(function() {
    console.log("started!");
    setInterval(countDown, 1000);
    $(this).hide(); //hide start button
    $("#stop").show(); //show stop button
  });

  //stop clock when stop clicked
  $("#stop").click(function() {
    console.log("stopped!");
    state = "off";
    minutes = workTime;
    seconds = 0;
    clockDisplay.innerHTML = workTime + ":00";
    $(this).hide(); //hiding stop
    $("#start").show(); //showing start
  });

  //add work time
  $('.plusWork').click(function() {
    workTime++;
    $('.work').text(workTime);
    console.log(workTime);
  });

  //substract work time
  $('.minWork').click(function() {
    workTime--;
    $('.work').text(workTime);
    console.log(workTime);
  });

  //add break time
  $('.plusBreak').click(function() {
    breakTime++;
    $('.break').text(breakTime);
    console.log(breakTime);
  });

  //substract break time
  $('.minBreak').click(function() {
    breakTime--;
    $('.break').text(breakTime);
    console.log(breakTime);
  });

  //countdown function
  function countDown() {
    //if workTime = 0 reset counter and stop
    if (minutes == 0 || state == 'off') {
      clearTimeout(counterId);
      return;
    }
    //when seconds < 0 substract a minute
    else if (seconds < 0) {
      minutes--;
      seconds = 59;
      clockDisplay.innerHTML = minutes + ":" + seconds;
    } else {
      //if second single digit add 0
      if (seconds < 10) seconds = "0" + seconds;
      clockDisplay.innerHTML = minutes + ":" + seconds;
      seconds--;
    }
  }
});

body {
  background-color: #22313f;
  ;
}

.title {
  margin: auto;
  text-align: center;
  font-size: 30px;
}

.container {
  text-align: center;
}

h2 {
  font-size: 50px;
  margin: 0 0 0 0;
}

.clockContainer {
  position: relative;
  text-align: center;
}

#display {}


/* .timer {
      margin: 0 50px;
      margin-top: 70px;
      text-align: center;
      border: solid black 1px;
      font-size: 44px;
      width: 500px;
      height: 200px;
      display: inline-block;
      
    } */

.controlContainer {
  position: absolute;
  text-align: center;
  width: 100px;
  display: inline-block;
}

.control {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  border: solid black 1px;
  text-align: center;
  margin-bottom: 20px;
}

.button {
  margin-top: 30px;
}

.hide {
  display: none;
}

.time {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 20px;
}

.ticker {
  display: inline-block;
  font-size: 30px;
  margin-top: 0px;
}

.minus {
  margin-right: 10px;
}

.plus {
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <!-- header title -->
  <div class="title primary-text">
    <h1>Pomodoro Clock</h1>
  </div>
  <!-- clock container -->
  <div class="clockContainer">
    <h2>Session</h2>
    <!-- timer / clock -->
    <div class="timer">
      <h1 id="display">30:00</h1>
    </div>
    <!-- this section for controlling clock -->
    <div class="controlContainer">
      <div class="control">
        <div id="start" class="button title">Start</div>
        <div id="stop" class="button hide title">Stop</div>
      </div>
      <div class="control">
        <h3 class="time work">30</h3>
        <h3 class="title">Work</h3>
        <h3 class="minWork ticker minus">-</h3>
        <h3 class="plusWork ticker plus">+</h3>
      </div>
      <div class="control">
        <h3 class="time break">10</h3>
        <h3 class="title">Break</h3>
        <h3 class="minBrake ticker minus">-</h3>
        <h3 class="plusBrake ticker plus">+</h3>
      </div>
    </div>
  </div>
</div>

Answer 1

你在h3 class：

中输错了

<h3 class="minBrake ticker minus">-</h3>
<h3 class="plusBrake ticker plus">+</h3>

应该是：

<h3 class="minBreak ticker minus">-</h3>
<h3 class="plusBreak ticker plus">+</h3>