javascript - 如何在按下按钮时更新变量？

Question

我这里有一些带有 jQ​​uery 和 AJAX 的 JavaScript。

单击按钮后，用户应该会看到与 1 到 6 之间的随机数相对应的骰子图像。这里发生的情况是仅计算结果一次(在页面加载时)并且每次单击按钮时都不会更新，这就是为什么我每次都得到相同的滚动结果。我怎样才能达到我想要的结果？

$(document).ready(function () {        
  $('.roll').click(function(e){
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: '/rolls',
        data: result,
        success: function() {
            $('h1').replaceWith('<h1>Rolled</h1>');
            $('#die').replaceWith(image)
        }
    })
  });   
  result = Math.floor(Math.random() * 6) + 1;
  image = "<img src='" + result + ".png' alt='yoo'>";   
});

Answer 1

重新计算必须在点击处理程序中但在 ajax 调用之前完成。

$(document).ready(function () {
    $('.roll').click(function(e){
        e.preventDefault();
        var result = Math.floor(Math.random() * 6) + 1;
        var image = "<img src='" + result + ".png'";
        $.ajax({
            type: 'POST',
            url: '/rolls',
            data: result,
            success: function() {
                $('h1').replaceWith('<h1>Rolled</h1>');
                $('#die').replaceWith(image)
            }
        })
    })
    .trigger('click');
 });