Question

我在这里有一些jQuery和AJAX的JavaScript。

点击一个按钮，应该向用户提供一个与1到6的随机数对应的骰子图像。这里发生的是result正在计算中只有一次（在页面加载时），并且每当我点击按钮时都不会更新，这就是为什么我每次都得到相同的滚动结果。我怎样才能达到我想要的结果呢？

$(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');
 });

Answer 2

你需要移动这些行

result = Math.floor（Math.random（）* 6）+ 1; image =＆＃34;＆＃34 ;;

到ajax成功函数的开头。你现在写的方式不是点击功能的一部分

还添加var result =＆＃34; default.png＆＃34;点击功能之前

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

2 个答案: