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
});

这是 demo fiddle

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

1 个答案: