Question

我最近想学习javascript和jquery，所以我还不太好。

我目前正在努力的页面是新闻页面。基本上新闻是文章标签，包含在两个不同的主要类别div中。

<body>
 <div class="a">
   <article> ... </article>
   <article> ... </article>
   <article> ... </article>
   ...
 </div>

 <div class="b">
   <article> ... </article>
   <article> ... </article>
   <article> ... </article>
   ...
 </div>
</body>

在每篇文章中都有一个带有图片的幻灯片，这是JS中的代码：

//dots functionality
dots = document.getElementsByClassName('dot');

for (i = 0; i < dots.length; i++) {

  dots[i].onclick = function() {

    slides = this.parentNode.parentNode.getElementsByClassName("mySlides");

    for (j = 0; j < this.parentNode.children.length; j++) {
      this.parentNode.children[j].classList.remove('active');
      slides[j].classList.remove('active-slide');
      if (this.parentNode.children[j] == this) {
        index = j;
      }
    }
    this.classList.add('active');
    slides[index].classList.add('active-slide');

  }
}

//prev/next functionality
links = document.querySelectorAll('.slideshow-container a');

for (i = 0; i < links.length; i++) {
  links[i].onclick = function() {
    current = this.parentNode;

    var slides = current.getElementsByClassName("mySlides");
    var dots = current.getElementsByClassName("dot");
    curr_slide = current.getElementsByClassName('active-slide')[0];
    curr_dot = current.getElementsByClassName('active')[0];
    curr_slide.classList.remove('active-slide');
    curr_dot.classList.remove('active');
    if (this.className == 'next') {

      if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
        curr_slide.nextElementSibling.classList.add('active-slide');
        curr_dot.nextElementSibling.classList.add('active');
      } else {
        slides[0].classList.add('active-slide');
        dots[0].classList.add('active');
      }

    }

    if (this.className == 'prev') {

      if (curr_slide.previousElementSibling) {
        curr_slide.previousElementSibling.classList.add('active-slide');
        curr_dot.previousElementSibling.classList.add('active');
      } else {
        slides[slides.length - 1].classList.add('active-slide');
        dots[slides.length - 1].classList.add('active');
      }

    }

  }

}

它工作正常，直到我用ajax滚动新闻数据。 JS代码不再起作用，我不知道如何解决它。

这是ajax代码：

$(document).ready(function() {

        function getDataFor(category) {
          var flag = 0;

          function getData() {

            $.ajax({
              type: 'GET',
              url: 'get_data.php',
              data: {
                'offset': flag,
                'limit': 3,
                'cat': category
              },
              success: function(data) {
                $('.' + category).append(data);
                flag += 3;
              }
            });
          }

          getData();

          var $window = $(window);
          var $document = $(document);

          $window.on('scroll', function() {
            if ($window.scrollTop() >= $document.height() - $window.height()) {
              getData();
            }
          });
        }

        getDataFor('a');
        getDataFor('b');
      });

Javascript不适用于动态内容

0 个答案: