自動刷新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將刷新。 如果需要，您可以更改時間。 如果您有任何疑問，請隨時問我。