javascript - 第二次单击按钮不起作用(JQuery)
问题描述
我在按钮单击事件上有一个 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
});
当我第一次单击任何按钮时它可以工作,但是当我第二次单击同一个按钮时它不起作用。
解决方案
玩家分数定义为 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>
推荐阅读
- python - 从 cloudant 数据构建 panda 数据帧,错误:如果使用所有标量值,则必须传递索引
- python - 颜色图从黑色而不是白色发散?
- javascript - 无法获得较低的值以在大范围内清晰显示
- c - 程序可以工作,但是当我调试时它说“
" 逐行读取文件时的行 - javascript - 在shopify主题内调整窗口大小时调用函数
- python - Django:尝试查询用户的帐户页面时未定义 NameError User_id
- flutter - 单击 TextField 会导致软键盘覆盖整个 android 模拟器屏幕
- php - PHP 日期让我很沮丧
- android - 强制 Gridlayout 具有 x 数量的列和方形单元格
- java - 使用 Guice 方法注入不作为 setter