は、その後、

Question

私は、チェックボックスで簡単なゲームを作ってるんだ、と私は彼らが勝つかの点を失っている場合は、ユーザーに伝えるために、いくつかのJavaScriptを置きます。このため私はこのスクリプトを作ったが動作していない、誰かがこれで私を助けてくれる？

値が正常に変更されますが、メッセージは1つしか表示されません。

ありがとうございます！

$(document).ready(function(){ 
 

 
var theTotal = 0; 
 

 
\t $("#one").on("click", function(){ 
 
\t \t if($(this).is(':checked')){ 
 
     theTotal = Number(theTotal) + Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); \t 
 
\t \t } else { 
 
     theTotal = Number(theTotal) - Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); 
 
\t \t } 
 
\t }); 
 
    
 
    $("#two").on("click", function(){ 
 
\t \t if($(this).is(':checked')){ 
 
     theTotal = Number(theTotal) + Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); \t 
 
\t \t } else { 
 
     theTotal = Number(theTotal) - Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); 
 
\t \t } 
 
\t }); 
 
    
 
    $("#three").on("click", function(){ 
 
\t \t if($(this).is(':checked')){ 
 
     theTotal = Number(theTotal) + Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); \t 
 
\t \t } else { 
 
     theTotal = Number(theTotal) - Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); 
 
\t \t } 
 
\t }); 
 

 

 
    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>

Answer 1

これは、あなたがそれを作業したい正確にどのようにではないかもしれないが、あなたは自分のif文を修正する必要があります。 ifステートメントは、アクションが発生するたびに実行する必要があります。これは、それらが一度だけ実行される理由です。彼らは他の時間に呼ばれていません。

$(document).ready(function(){ 
 

 
var theTotal = 0; 
 

 
\t $("#one").on("click", function(){ 
 
\t \t if($(this).is(':checked')){ 
 
     theTotal = Number(theTotal) + Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); \t 
 
\t \t } else { 
 
     theTotal = Number(theTotal) - Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); 
 
\t \t } 
 
\t }); 
 
    
 
    $("#two").on("click", function(){ 
 
\t \t if($(this).is(':checked')){ 
 
     theTotal = Number(theTotal) + Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); \t 
 
\t \t } else { 
 
     theTotal = Number(theTotal) - Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); 
 
\t \t } 
 
\t }); 
 
    
 
    $("#three").on("click", function(){ 
 
\t \t if($(this).is(':checked')){ 
 
     theTotal = Number(theTotal) + Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); \t 
 
\t \t } else { 
 
     theTotal = Number(theTotal) - Number($(this).val()); 
 
     $('.total').text("Total: "+theTotal); 
 
\t \t } 
 
\t }); 
 

 
$(".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>

Answer 2

私は通常、誰かのコードではかなりこのくらいの編集作業をしない、しかし、あなたがDRYを壊したの度合いは、私の心を壊した:)

まず第一にあなたのコードが失敗した理由は、document.readyで一度だけメッセージングの条件チェックを実行していたからです。その後、クリックハンドラーはクリックごとに実行されますが、ポイント評価は再び行われませんでした。

第2に、すべてのクリックハンドラは同じでした。そのため、私はチェックボックスをクリックしたときに呼び出される単一の関数にしました。そして、ポイント評価をその関数に移しました。

下記をご覧ください。それはおそらく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>

Answer 3

あなたは$(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>