Question

我有ajax页面，我使用jquery来获取我的内容，但只有一个页面正在使用我的ajax函数，但我有两个或两个以上的页面..我可以修复它吗？

＆＃13;

$(document).ready(function() {
  $('.lazy_content').each(function() {
    data_url = $(this).attr("data-url");
    data_id = $(this).attr("data-target-id");

    $.ajax({
      url: data_url,
      type: "POST",
      beforeSend: function() {
        $("#" + data_id).html("");
      },
      success: function(data) {
        $(data).each(function(index, el) {
          $("#" + data_id).html(data);
        });
      }
    })
  });
});

＆＃13;

<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div id="PostsArea"></div>
</div>

<div class="lazy_content" data-url="http://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div id="CommentsArea"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

please click to see full version

Answer 1

截至目前，您正在覆盖内容。您需要使用.append()代替.html()

//Define these variables 
var data_url = $(this).data("url");
var data_id = $(this).data("target-id");
var target = $("#" + data_id);

//Use append
$("#" + data_id).append(el);

＆＃13;

$(document).ready(function() {
  $('.lazy_content').each(function() {
    var data_url = $(this).data("url");
    var data_id = $(this).data("target-id");
    var target = $("#" + data_id);

    $.ajax({
      url: data_url,
      type: "POST",
      beforeSend: function() {
        target.html("");
      },
      success: function(data) {
        $(data).each(function(index, el) {
          target.append(el);
        });
      }
    })
  });
});

＆＃13;

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div id="PostsArea"></div>
</div>

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div id="CommentsArea"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

或者，当你获得HTML片段时，你可以摆脱each()并直接使用

$("#" + data_id).html(data)

是的，您可以使用class选择器作为目标。

＆＃13;

$(document).ready(function() {
  $('.lazy_content').each(function() {
    var data_url = $(this).data("url");
    var target = $(this).find('.comment-area');
    $.ajax({
      url: data_url,
      type: "POST",
      success: function(data) {
        target.append(data)
      }
    })
  });
});

＆＃13;

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-1-comments" data-target-id="PostsArea">
  <h4>COMMENTS</h4>
  <div class="comment-area"></div>
</div>

<div class="lazy_content" data-url="https://www.anitur.com.tr/popup/test-2-posts" data-target-id="CommentsArea">
  <h4>POSTS</h4>
  <div class="comment-area"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

问题是您的变量在.each的每次迭代中都会更改。我认为您应该在外部index中使用.each来索引应该是数组的变量。并使用适当的索引，如下所示：

var data_url = [];
var data_id = [];
$(document).ready(function(){
   $('.lazy_content').each(function(index){
        data_url.push($(this).attr("data-url"));
        data_id.push($(this).attr("data-target-id"));

        $.ajax({
            url: data_url[index],
            type: "POST",
            beforeSend: function() {
                $("#" + data_id[index]).html("");
            },
            success: function(data) {
                $(data).each(function(index2, el) {
                    $("#" + data_id[index]).append(el);
                });
            }
        })
    });
});

我的jquery ajax代码有什么问题

2 个答案: