自动刷新div而不刷新整个页面

Question

有没有一种简单的方法可以在不刷新整个页面的情况下自动刷新div？

<div class="refresh-this">
  <div class="left">
    Left
  </div>

  <div class="right">
    Right
  </div>
</div>

你会在codepen中看到，每次页面刷新时我都会添加一个随机类

https://codepen.io/anon/pen/JOjwLz

Answer 1

您好，您可以使用此jquery脚本。

function randomClass() {

    let classes = ['random-1','random-2', 'random-3'];
    let index = Math.floor(Math.random() * classes.length);

    return classes[index];
}

$(document).ready(function(){
  setInterval(function(){
    let leftClass, rightClass;
    while (leftClass == rightClass) {
        leftClass = randomClass();
        rightClass = randomClass();
    }
    $('.left').addClass(leftClass);
     $('.left').removeClass(rightClass);
    $('.right').addClass(rightClass);
     $('.right').removeClass(leftClass);
    }, 1000);
});

最后我每隔1秒钟添加1000表示这个div会刷新。如果你想，你可以改变时间。 如果您有任何问题请随时问我。