Question

我有两个代码我已经完成了在滚动上加载数据并在两个不同的div（.cat_a和.cat_b）中显示它。

数据作为对象存储在json文件中，并从get_data.php一次打印3个。

我不熟悉JS和jQuery，有没有办法简化和清理它们？

加载数据（div class =“。cat_a”）：

<script type="text/javascript">
  $(document).ready(function() {

    var flag = 0;

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

    });

    $(window).scroll(function() {
      if ($(window).scrollTop() >= $(document).height() - $(window).height()) {

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

      }
    });
  });
</script>

在（div class =“。cat_b”）上加载数据：

<script type="text/javascript">
  $(document).ready(function() {

    var flag = 0;

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

    });

    $(window).scroll(function() {
      if ($(window).scrollTop() >= $(document).height() - $(window).height()) {

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

      }
    });
  });
</script>

Answer 1

我减少了代码中的冗余并添加了评论。

＆＃13;

$(document).ready(function() {
  //create a method that can be called for each category
  //it also scopes a flag variable for each one
  function getDataFor(category) {
    var flag = 0;

    //the ajax call is made the same for the initial call and on scroll
    //so that's another method
    function getData() {
      $.ajax({
        type: 'GET',
        url: 'get_data.php',
        data: {
          'offset': 0,
          'limit': 3,
          'cat': category
        },
        success: function(data) {
          $('.' + category).append(data);
          flag += 3;
        }
      });
    }

    getData(); //do our initial ajax call for the category

    //these jQuery variables are made multiple times in the scroll event
    //so we can cache them for some performance
    var $window = $(window);
    var $document = $(document);

    $window.on('scroll', function() {
      if ($window.scrollTop() >= $document.height() - $window.height()) {
        //call our ajax again on scroll when needed
        getData();
      }
    });
  }

  //call the method for each category we want to perform the logic on
  getDataFor('cat_a');
  getDataFor('cat_b');
});

＆＃13;

简化jQuery代码

1 个答案: