你缺少你的jQuery的电话一个 '#':
window.outputBefore = function(x) {
$("#output-before").text(x); // You were missing the # here
};
此外,一些其他的东西: 变化
window.ACTIVE_NUMBER;
window.LAST_NUMBER;
要:
var ACTIVE_NUMBER;
var LAST_NUMBER;
另外,在更新ACTIVE_NUMBER之前,您需要更改LAST_NUMBER,这样它才会记住ACTIVE_NUMBER在其当前值之前的位置。
window.checker = function() {
LAST_NUMBER = ACTIVE_NUMBER; // Added this line
var foundnumber = parseInt($(".tool.active").index() + 1);
ACTIVE_NUMBER = foundnumber;
};
,然后在点击功能,你需要输出LAST_NUMBER:
$(".tool").click(function() {
if ($(this).hasClass("active")) {
console.log("It is already active.");
} else {
$(".tool").removeClass("active");
$(this).addClass("active");
checker();
outputBefore(ACTIVE_NUMBER); // Add this line
output(LAST_NUMBER);
}
});
并把分号后,您的所有功能。
全码:
$(document).ready(function() {
// global variables
var ACTIVE_NUMBER;
var LAST_NUMBER;
// global functions
window.output = function(x) {
$("#output").text(x);
};
window.outputBefore = function(x) {
$("#output-before").text(x);
};
window.checker = function() {
LAST_NUMBER = ACTIVE_NUMBER;
var foundnumber = parseInt($(".tool.active").index() + 1);
ACTIVE_NUMBER = foundnumber;
};
// the starting value
// if(LAST_NUMBER == undefined){
// LAST_NUMBER = 1;
// }
checker();
output(ACTIVE_NUMBER);
outputBefore(LAST_NUMBER);
// Changes applied onclick event
$(".tool").click(function() {
if ($(this).hasClass("active")) {
console.log("It is already active.");
} else {
$(".tool").removeClass("active");
$(this).addClass("active");
checker();
outputBefore(ACTIVE_NUMBER);
output(LAST_NUMBER);
}
});
});
很好的解释。非常感谢! – Dawid