javascript - 显示随机列表项，仅重新加载一个 div

Question

我正在处理一个<li>显示单个页面的页面。按下按钮时，页面会重新加载并随机显示另一个<li>. 我已经通过以下方式实现了这一目标：

this.randomtip = function(){
    var length = $("#tips li").length;
    var ran = Math.floor(Math.random()*length) + 1;
    $("#tips li:nth-child(" + ran + ")").show();

和...

<a href="#" class="myButton" onClick="location.reload();">

当按钮重新加载页面时，几个元素会跳回原位。我尝试将这些元素保存在具有固定高度的 div 中。是一种只重新加载这个 div 以避免跳跃的方法吗？

Answer 1

无需重新加载页面，只需使用按钮上的单击事件来隐藏提示并显示随机提示：

$(function(){
    var $tips = $("#tips li");
    $('.myButton').click(function(){
        var rand = Math.floor(Math.random()*$tips.length);
        $tips.hide().eq(rand).show();
        return false;
    }).triggerHandler('click'); //Trigger event on page load
});

这是一个演示小提琴