根据点击次数增加价值

Question

目的

• 在第一个函数countCorrect中，我尝试根据用户点击类count
的按钮的次数来增加is-correct
• 最终目标是将count的值传递给第二个函数changeTotalCorrect，以便更新页面上的HTML

问题

• 当点击一个带有正确答案的按钮并且登录到控制台的count值为0时，我希望整数在1-10之间。

scripts.js中

function countCorrect() {
    var count = 0;

    $(".is-correct").on("click", function(){
        count = count++;
        console.log("Answer is correct.");
        console.log(count); // Expect an integer from 1-10
    });

    return count;
}

function changeTotalCorrect(func) {
    var count = countCorrect(); // Expect an integer from 1-10
    $(".highlight").html(count); // Change the HTML to reflect the new number
}

changeTotalCorrect();

的index.html

<div class="buttons">
                    <button class="btn btn--option btn--one is-correct">${{ content.price_correct|int }}</button>
                    <button class="btn btn--option btn--two">${{ content.price_incorrect_one|int }}</button>
                    <button class="btn btn--option btn--three">${{ content.price_incorrect_two|int }}</button>
                    <button class="btn btn--option btn--four">${{ content.price_incorrect_three|int }}</button>
                </div>

Answer 1

您必须将点击侦听器放在函数之外，如下所示：

var count = 0;

$(".is-correct").on("click", function(){
    count++;
    console.log("Answer is correct.");
    console.log(count); // Expect an integer from 1-10
    changeTotalCorrect();
});


function changeTotalCorrect(func) {
    $(".highlight").html(count); // Change the HTML to reflect the new number
}

changeTotalCorrect();

var count = 0;

$(".is-correct").on("click", function(){
    count++;
    console.log("Answer is correct.");
    console.log(count); // Expect an integer from 1-10
    changeTotalCorrect();
});


function changeTotalCorrect(func) {
    $(".highlight").html(count); // Change the HTML to reflect the new number
}

changeTotalCorrect();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
                    <button class="btn btn--option btn--one is-correct">${{ content.price_correct|int }}</button>
                    <button class="btn btn--option btn--two">${{ content.price_incorrect_one|int }}</button>
                    <button class="btn btn--option btn--three">${{ content.price_incorrect_two|int }}</button>
                    <button class="btn btn--option btn--four">${{ content.price_incorrect_three|int }}</button>
                </div>

Answer 2

您可以使用jQuery https://jsfiddle.net/jeogdzh7/

找到解决方案

var cnt = 0;

$('button').each(function(){
   $(this).attr('cnt', cnt);
})

$('button').click(function(){
   if($(this).hasClass('is-correct')){
      $(this).html( "Count " + (parseInt($(this).attr('cnt')) + 1 ));
      $(this).attr('cnt', (parseInt($(this).attr('cnt')) + 1));
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="buttons">
  <button class="btn btn--option btn--one is-correct">Count 0</button>
  <button class="btn btn--option btn--two">Count 0</button>
  <button class="btn btn--option btn--three">Count 0</button>
  <button class="btn btn--option btn--four">Count 0</button>
</div>

我正在使用attribute来存储click的计数。 .hasClass用于检查button中的班级。

我没有使用两个单独的函数来更新计数，而是使用click函数内部完成的。

更新代码

$('button').click(function(){
   if($(this).hasClass('is-correct')){
      $(this)
        .attr('cnt', (parseInt($(this).attr('cnt')) + 1))
        .html( "Count " + $(this).attr('cnt'));
   }
 });

希望这会对你有所帮助。

Answer 3

问题是

count = count++;

应该是：

count++;

在变量工作之后使用++运算符，通过计算当前值（在这种情况下为0）和然后递增存储在变量中的值。它是您错误地分配给变量的评估值（0）。