第二次單擊按鈕不起作用（JQuery）

Question

我有一個 onClick 函數處理按鈕單擊事件。
問題是此功能僅對每個按鈕工作一次

HTML：

<div id="playerScore">120</div>
            <div class="col-md-12 bg-dark">
               <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example">
                  <button type="button" data-score="5" class="btn scoreBtn btn-secondary">5</button>
                  <button type="button" data-score="6" class="btn scoreBtn btn-secondary">6</button>
                  <button type="button" data-score="7" class="btn scoreBtn btn-secondary">7</button>
                  <button type="button" data-score="8" id="scoreBtn" class="btn scoreBtn btn-secondary">8</button>
               </div>
            </div>
            <div class="col-md-12 bg-dark">
               <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example">
                  <button type="button" data-score="9" class="btn scoreBtn btn-secondary">9</button>
                  <button type="button" data-score="10" class="btn scoreBtn btn-secondary">10</button>
                  <button type="button" data-score="11" class="btn scoreBtn btn-secondary">11</button>
                  <button type="button" data-score="12" class="btn scoreBtn btn-secondary">12</button>
               </div>
            </div>

查詢：

 var playerScore = 100; //starting score
  $('#playerScore').html(playerScore); // set starting player score

$(".scoreBtn").click(function() {
         var getCurrentScore = playerScore; //get player score
         var clickedScore = $(this).attr("data-score"); // get clicked button score
         var newScore = getCurrentScore - clickedScore; // subtract current score from clicked button score

         $('#playerScore').html(newScore); //update current score

      });

當我第一次單擊任何按鈕時它起作用，但是當我第二次單擊同一個按鈕時它不起作用。

Answer 1

玩家得分定義為 100，並且您不會在單擊按鈕時獲得更新的得分。 您可以通過更新函數中的分數來解決此問題，這可以通過執行以下操作來完成：

var getCurrentScore = $('#playerScore').text(); //get player score

你的功能變成：

$(".scoreBtn").click(function() {
     var getCurrentScore = $('#playerScore').text(); //get player score
     var clickedScore = $(this).attr("data-score"); // get clicked button score
     var newScore = getCurrentScore - clickedScore; // subtract current score from clicked button score

     $('#playerScore').html(newScore); //update current score
});

在以下代碼段中嘗試一下：

 var playerScore = 100; //starting score $('#playerScore').html(playerScore); // set starting player score $(".scoreBtn").click(function() { var getCurrentScore = $('#playerScore').text(); //get player score var clickedScore = $(this).attr("data-score"); // get clicked button score var newScore = getCurrentScore - clickedScore; // subtract current score from clicked button score $('#playerScore').html(newScore); //update current score });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="playerScore">120</div> <div class="col-md-12 bg-dark"> <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example"> <button type="button" data-score="5" class="btn scoreBtn btn-secondary">5</button> <button type="button" data-score="6" class="btn scoreBtn btn-secondary">6</button> <button type="button" data-score="7" class="btn scoreBtn btn-secondary">7</button> <button type="button" data-score="8" id="scoreBtn" class="btn scoreBtn btn-secondary">8</button> </div> </div> <div class="col-md-12 bg-dark"> <div class="btn-group d-flex align-content-stretch" role="group" aria-label="Basic example"> <button type="button" data-score="9" class="btn scoreBtn btn-secondary">9</button> <button type="button" data-score="10" class="btn scoreBtn btn-secondary">10</button> <button type="button" data-score="11" class="btn scoreBtn btn-secondary">11</button> <button type="button" data-score="12" class="btn scoreBtn btn-secondary">12</button> </div> </div>