我正在制作一个带复选框的简单游戏，我会用一些JavaScript来告诉用户他们是赢还是失分。为此我已经制作了这个剧本但是没有用，有人可以帮我这个吗？
虽然它成功地改变了它的价值，但它只显示一条消息。
提前致谢！
$(document).ready(function(){
var theTotal = 0;
$("#one").on("click", function(){
if($(this).is(':checked')){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: "+theTotal);
}
});
$("#two").on("click", function(){
if($(this).is(':checked')){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: "+theTotal);
}
});
$("#three").on("click", function(){
if($(this).is(':checked')){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: "+theTotal);
}
});
if (theTotal >= 4) {
$("#ok").show();
} else {
$("#ok").hide();
}
if (theTotal >= 7) {
$("#win").show();
} else {
$("#win").hide();
}
if (theTotal <= 3) {
$("#lose").show();
} else {
$("#lose").hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="one" type="checkbox" value="3">
<input id="two" type="checkbox" value="5">
<input id="three" type="checkbox" value="2">
<div id="win">You are winning!</div>
<div id="lose">You are losing!</div>
<div id="ok">You can do it better!</div>
<div class="total"></div>
答案 0 :(得分：1)
我通常不会对某人的代码进行这么多的编辑工作，但是你打破DRY的程度让我心碎了。）
首先 - 您的代码失败的原因是因为您只在document.ready一次运行条件检查消息 - 之后，您的点击处理程序将在每次点击时运行，但是分数评估从未再次发生过。
其次 - 所有点击处理程序都是相同的。因此，我将它们变成了一个单独的函数，只要单击一个复选框就可以调用它。然后我将积分评估转移到该函数中。
在下面查看。它可能不是100％，但希望它足以让你进一步走上你想要的道路。祝你好运 - 编码愉快！
$(document).ready(function() {
var theTotal = 0;
function evaluateChecked () {
if ($(this).is(':checked')) {
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: " + theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: " + theTotal);
}
if (theTotal >= 4) {
$("#ok").show();
} else {
$("#ok").hide();
}
if (theTotal >= 7) {
$("#win").show();
} else {
$("#win").hide();
}
if (theTotal <= 3) {
$("#lose").show();
} else {
$("#lose").hide();
}
}
$('[type="checkbox"]').click(evaluateChecked);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="one" type="checkbox" value="3">
<input id="two" type="checkbox" value="5">
<input id="three" type="checkbox" value="2">
<div id="win">You are winning!</div>
<div id="lose">You are losing!</div>
<div id="ok">You can do it better!</div>
<div class="total"></div>
答案 1 :(得分：1)
在$(document).ready函数中编写代码时，它只执行一次。因此，您需要在复选框的单击事件上调用更新功能。请查看以下更新的代码。
$(document).ready(function() {
var theTotal = 0;
$("#one").on("click", function() {
if ($(this).is(':checked')) {
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: " + theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: " + theTotal);
}
updateValue();
});
$("#two").on("click", function() {
if ($(this).is(':checked')) {
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: " + theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: " + theTotal);
}
updateValue();
});
$("#three").on("click", function() {
if ($(this).is(':checked')) {
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: " + theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: " + theTotal);
}
updateValue();
});
updateValue();
function updateValue() {
if (theTotal >= 4) {
$("#ok").show();
} else {
$("#ok").hide();
}
if (theTotal >= 7) {
$("#win").show();
} else {
$("#win").hide();
}
if (theTotal <= 3) {
$("#lose").show();
} else {
$("#lose").hide();
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="one" type="checkbox" value="3">
<input id="two" type="checkbox" value="5">
<input id="three" type="checkbox" value="2">
<div id="win">You are winning!</div>
<div id="lose">You are losing!</div>
<div id="ok">You can do it better!</div>
<div class="total"></div>
答案 2 :(得分：1)
这可能不完全是您希望它如何工作，但您只需要修复if语句。每当动作发生时，if语句都需要运行，这就是它们只运行一次的原因。他们在任何其他时间都不会打电话。
$(document).ready(function(){
var theTotal = 0;
$("#one").on("click", function(){
if($(this).is(':checked')){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: "+theTotal);
}
});
$("#two").on("click", function(){
if($(this).is(':checked')){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: "+theTotal);
}
});
$("#three").on("click", function(){
if($(this).is(':checked')){
theTotal = Number(theTotal) + Number($(this).val());
$('.total').text("Total: "+theTotal);
} else {
theTotal = Number(theTotal) - Number($(this).val());
$('.total').text("Total: "+theTotal);
}
});
$(".checkbox").on('click', function(){
if (theTotal >= 4) {
$("#ok").show();
} else {
$("#ok").hide();
}
if (theTotal >= 7) {
$("#win").show();
} else {
$("#win").hide();
}
if (theTotal <= 3) {
$("#lose").show();
} else {
$("#lose").hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="one" type="checkbox" value="3" class="checkbox">
<input id="two" type="checkbox" value="5" class="checkbox">
<input id="three" type="checkbox" value="2" class="checkbox">
<div id="win">You are winning!</div>
<div id="lose">You are losing!</div>
<div id="ok">You can do it better!</div>
<div class="total"></div>