Изменить класс статьи в функции Ajax - PullRequest
Новая
       6

Изменить класс статьи в функции Ajax

0 голосов
/ 08 января 2019

У меня есть личный блог на страницах GitHub и 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-части, но у меня нет нулевых знаний в этой части ... Если кто-то знает решение, пожалуйста, поделитесь

1 Ответ

0 голосов
/ 08 января 2019

Заменить этот скрипт: 

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

NB. Я также воспользовался возможностью использовать функции jQuery.

Затем, в части Ajax, также вызовите эту функцию: 

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