分隔符中用标记括起来的字符串<span>

Question

我想改变">课程";进入歌曲， as0 of 22动态值，它将增加当有人点击按钮。我已经尝试过这个代码，但它没有增加数字:

setInterval(() => {
if ($('#completion-count').length && !$('.completion_count_no_repeat').length) {
$('#completion-count').empty();
$("#completion-count").append(`<span id="completion-count" class="font-semibold">0 of 22 Songs Completed</span>`);
}
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="completion-count" class="font-semibold">0 of 22 Lessons Completed</span>

Answer 1

您没有增加数字。

您需要保存最后一个数字的计数，然后将其格式化为字符串:

let index = 0;
setInterval(() => {
if ($('#completion-count').length && !$('.completion_count_no_repeat').length) {
$('#completion-count').empty();
$("#completion-count").append(`<span id="completion-count" class="font-semibold">${index} of 22 Songs Completed</span>`)
}
index++;
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="completion-count" class="font-semibold">0 of 22 Lessons Completed</span>

字符串中的花括号用于模板化。(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)