체크 박스가있는 간단한 게임을 만들고 있으며, 사용자에게 점수를 얻거나 잃는지를 알려주기 위해 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>
이것이 당신이 원하는 방식이 아닐 수도 있지만, 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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다