时间戳

首页 > 解决方案 > 更改 Ajax 函数中的文章类

javascript - 更改 Ajax 函数中的文章类

问题描述

我在 GitHub Pages 和 Jekyll 上有个人博客。我在 CSS 中有一些样式用于文章并随机更改它们。这是一个代码：

<section class="tiles"> 

  {% for post in site.posts %}
    <article class="XXX" id="styleChanger">
      <span class="image">
        <img src="../../../images/posts/{{ post.date | date: "%Y-%m-%d" }}.jpg" alt="" />
      </span>
      <a href="{{ post.url }}" title="{{ post.title }}">
        <h3>{{ post.title }}</h3>
        <div class="content">
          <p>{{ post.date | date_to_string }}</p>
        </div>
      </a>
    </article>
  {% endfor %}

  <script>
    const elements = document.querySelectorAll('article');
    elements.forEach(element => {
          function getRandom(max) {
          return "style" + Math.floor(Math.random() * max);
        }
        element.classList.add(getRandom(6));
      });
  </script>

</section>

它看起来像这样：

然后我尝试从这篇文章中在 Ajax 上添加分页按钮

这是一个对我有用的带有一些修改的代码：

<section class="tiles" >  
  {% if paginator.page %}
    {% assign offset = paginator.page | minus:1 | times:paginator.per_page %}
    {% assign currentPage = paginator.page %}
  {% else %}
    {% assign offset = 0 %}
    {% assign currentPage = 1 %}
  {% endif %}
  <div id="blogContainer" class="tiles" data-page="{{ currentPage }}" data-totalPages="{{ paginator.total_pages }}">
    {% for post in site.posts limit:paginator.per_page offset:offset %}
    <article class="style" id="styleChanger">
      <span class="image">
        <img src="../../../images/posts/{{ post.date | date: "%Y-%m-%d" }}.jpg" alt="" />
      </span>
      <a href="{{ post.url }}" title="{{ post.title }}">
        <h3>{{ post.title }}</h3>
        <div class="content">
          <p>{{ post.date | date_to_string }}</p>
        </div>
      </a>
    </article>
    {% endfor %}
  </div>
  {% assign postCount = site.posts | size %}
  {% assign postsCovered = paginator.per_page | plus:offset %}
  {% if postsCovered < postCount %}
  <button class="loadMore">Показать еще</button>

  {% endif %}
  <script>
    $(".loadMore").click(loadMorePosts);
    function loadMorePosts() {
      var _this = this;
      var $blogContainer = $("#blogContainer");
      var nextPage = parseInt($blogContainer.attr("data-page")) + 1;
      var totalPages = parseInt($blogContainer.attr("data-totalPages"));
      $(this).addClass("loading");

      $.get("/blog/page" + nextPage, function (data) {
        var htmlData = $.parseHTML(data);
        var $articles = $(htmlData).find("article");
        $blogContainer.attr("data-page", nextPage).append($articles);

        if ($blogContainer.attr("data-totalPages") == nextPage) {
          $(".loadMore").remove();
        }
        $(_this).removeClass("loading");
      });  
    }
  </script>


  <script>
    const elements = document.querySelectorAll('article');
    elements.forEach(element => {
          function getRandom(max) {
          return "style" + Math.floor(Math.random() * max);
        }
        element.classList.add(getRandom(6));
      });
  </script>
</section>

但是当加载新文章时，随机样式不适用于它们。这看起来像这样：

我知道一些 foreach 结构必须在 Ajax 部分，但我在这部分的知识为零......如果有人知道解决方案，请分享

标签： javascriptajaxhtmljekyll

解决方案

替换此脚本：

const elements = document.querySelectorAll('article');
elements.forEach(element => {
    function getRandom(max) {
        return "style" + Math.floor(Math.random() * max);
    }
    element.classList.add(getRandom(6));
});

使用一个函数——也称为：

function getRandom(max) {
    return Math.floor(Math.random() * max);
}

function setStyles($articles) {
    $articles.each(function () {
        $(this).addClass("style" + getRandom(6));
    });
}

setStyles($("article"));

注意：我也借此机会使用了 jQuery 函数。

然后，在 Ajax 部分，也调用该函数：

$blogContainer.attr("data-page", nextPage).append($articles);
setStyles($articles); // <---

推荐阅读