Question

我在jQuery中编写了一个代码：

<span id="counter-up" class="timer">
</span>

<div class="buttons">
    <button id="trigger">Result!</button>
</div>
</div>
<div class="container">
</div>

<script>
    var Numbers = 30;

    function secondPassed() {
        var random = Math.random() * 2024 + 10;
        random = parseInt(random);
        document.getElementById('counter-up').innerHTML = random;
        if (Numbers == 0) {
            clearInterval(countdownTimer);
            document.getElementById('counter-up').innerHTML = "2024";
        } else {
            Numbers--;
        }
    }

    var countdownTimer = setInterval('secondPassed()', 100);
</script>

在此代码中，在加载页面时调用函数secondPassed。我希望当我点击带有trigger的按钮时，应该调用此函数。我怎样才能做到这一点？

Answer 1

在元素上绑定事件并将处理程序作为函数引用传递

$('#trigger').click(secondPassed);

我还建议使用非字符串回调来设置setInterval函数。

var countdownTimer = setInterval(secondPassed, 100);

您需要重置变量以使计时器正常工作
不要使用字符串版本的函数作为回调setInterval使用函数引用。
当您在页面上包含jQuery时，使用它来操作DOM。

现场演示

var Numbers = 30,
  countdownTimer;

var $counter = $('#counter-up');

function secondPassed() {
  var random = parseInt(Math.random() * 2024 + 10, 10);

  $counter.html(random);
  if (Numbers == 0) {
    clearInterval(countdownTimer);
    $counter.innerHTML = "2024";
  } else {
    Numbers--;
  }
}

countdownTimer = setInterval(secondPassed, 100);

$('#trigger').click(function() {
  Numbers = 30;
  countdownTimer = setInterval(secondPassed, 100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span id="counter-up" class="timer">
</span>

<div class="buttons">
  <button id="trigger">Result!</button>
</div>

<div class="container">
</div>

Answer 2

尝试这样做：

$(document).ready(function(){
    secondPassed();//after document ready
    $('#trigger').on('click',function(){
           secondPassed();//onclick of button
    });

});

Answer 3

<script>
    D = document

    $(D).ready(function() {

        $("#trigger").click(function() {
            var Numbers = 30;
            var random = Math.random() * 2024 + 10;
            random = parseInt(random);
            document.getElementById('counter-up').innerHTML = random;
            if (Numbers == 0) {
                clearInterval(countdownTimer);
                document.getElementById('counter-up').innerHTML = "2024";
            } else {
                Numbers--;
            }
        });


    });
</script>

我希望它有效，但所有答案都接近我的想法：D

Answer 4

试试这个

<script>
    $(function() {
        $('#trigger').on('click', function() {
            secondPassed();
        });
    });
    var Numbers = 30;

    function secondPassed() {
        var random = Math.random() * 2024 + 10;
        random = parseInt(random);
        document.getElementById('counter-up').innerHTML = random;
        if (Numbers == 0) {
            clearInterval(countdownTimer);
            document.getElementById('counter-up').innerHTML = "2024";
        } else {
            Numbers--;
        }
    }

    var countdownTimer = setInterval(secondPassed(), 100);
</script>

如何在jQuery中单击按钮调用函数

4 个答案: