javascript - 如何在单击时刷新 Jquery/javascript 变量而不重新加载页面？

Question

我首先要说的是，这似乎是以前肯定被问过的问题，但令人惊讶的是，我的谷歌搜索只出现了无关的相关结果。

我有以下代码，它具有以下功能:

1) 每次加载页面时，随机将 3 个值之一分配给变量 (VariableVar1random)

2) 点击时显示正方形的按钮

3) 一个按钮，可将 3 个值之一重新分配给变量，而无需刷新页面。例如，假设在页面加载时，变量生成为“Variable3”。如果我单击显示正方形的按钮，然后单击重新分配变量值的按钮，则变量应重新生成为“Variable1”或“Variable2”，而无需刷新页面(正方形仍显示)。

我尝试过removeData()以及其他函数，但似乎找不到任何有效的方法。 AJAX 有必要吗？

代码:https://jsfiddle.net/asb7bx6p/20/

HTML

<span class="VariableVar1randomreplacer"></span>

<br>
<br>
<div class="buttonresetvariable" style="border:1px solid black;">Click to Reset Variable</div>
<br>
<div class="buttonshowsquare" style="border:1px solid black;">Click to Show Square</div>

<div class="alertsquare" style="display:none;border:1px solid black;height:50px;width:50px;background-color:green;"></div>

JQUERY

 function Variableselector1() {

    var VariableVar1= ['Variable1', 'Variable2', 'Variable3'];
    var VariableVar1random = VariableVar1[Math.floor(Math.random() * VariableVar1.length)];
    return VariableVar1random;
}

    var VariableVar1randomreplacer = Variableselector1();
    $('.VariableVar1randomreplacer').html(VariableVar1randomreplacer );

$( ".buttonshowsquare" ).click(function() {
$( ".alertsquare").show();
});

$( ".buttonresetvariable" ).click(function() {
////???????????????
})

Answer 1

乍一看，这适合:

$( ".buttonresetvariable" ).click(function() {
   var VariableVar1randomreplacer = Variableselector1();
   $('.VariableVar1randomreplacer').html(VariableVar1randomreplacer );
})

https://jsfiddle.net/asb7bx6p/22/

Is AJAX necessary?

就您而言，您已经获得了可以在客户端上操作的所有数据。 简而言之，当您需要交互/从远程服务器获取一些数据时，AJAX 请求是必要的。