0
我有一个pomodoro时钟，并且我在分别用于minBreak和plusBreak的听众时遇到问题。 plusWork minWork jquery监听器工作得很好，但由于某些原因，minBreak和plusBreak的监听器不工作。有人能告诉我为什么吗？这里的代码（不介意设计太多..还没完）h3标签的听众不工作
$(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>
我想你想要的是'.mouseup（）'或'.mousedown（）'而不是'.click（）'。 – Difster
拼写很重要你在jQuery和'.minBrake'中使用'.minBreak'在html中 –
刚刚检查了什么@JoeB。建议他是对的！它的作品，当你改变'minBrake'和'plusBrake'在JS – hansTheFranz