Question

功能

我创建了2个<div>，其ID名称不同。 2个不同的<div>将执行ajax调用以检索一组图像，以便显示检索到的图像。

总之，2个不同的id名称正在调用相同的ajax方法来检索要显示的一组图像。

已完成的工作：

我创建了2个不同的<div>。我已将第1和第2个div引用到同一个ajax调用，最后我将其附加到<div> id

代码：

$("#page_content").on("scroll", function() {
  if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
    retrievePost(true);
  }
});

$("#displayPage").on("scroll", function() {
  if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
    retrievePost(true);
  }
});

HideShowDiv()

var num_post = 30;
var display_page = 0;
var venueID = 99;

function retrievePost(isAppend) {
  ajax_retrieveImages("imagesocial.do", "formType=retrieveServerImages&venueID=" + venueID + "&num=" + num_post + "&page=" + display_page, isAppend);
}


// Function call for the FIRST DIV ID: TO CALL ON AJAX METHOD TO RETRIEVE IMAGES

function HideShowDiv() {

  retrievePost(false);
  display_page = 0;
}

// Function call for the SECOND DIV ID: TO CALL ON AJAX METHOD TO RETRIEVE IMAGES

$("#IGram").click(function() {
  console.log(this.id);

  $("#MainMenu").fadeOut(function() {
    $("#NPage").fadeIn();
  })

   retrievePost(false);
  display_page = 0;
})

<div id="M_Start" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

  <div id="IDisplayPage" style="position:absolute;">
    <table cellspacing="0" cellpadding="0" width="1080">
      <tr>
        <td width="1080" align="center">

          <!-- FIRST DIV ID: TO CALL ON AJAX METHOD TO RETRIEVE IMAGES-->
          <div id="displayPage" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>


        </td>
      </tr>
    </table>
  </div>
</div>

<div id="NPage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=3; top:0px; left:0px;">
  <table cellspacing="0" cellpadding="0" width="1080">
    <tr>
      <td width="1080" align="center">

        <!-- SECOND DIV ID: TO CALL ON AJAX METHOD TO RETRIEVE IMAGES-->

        <div id="page_content" style="position:absolute; z-index:2; top:1020px; left:22px; overflow-y:scroll; overflow-x:hidden; height:820px; width:1050px;"></div>


      </td>
    </tr>
  </table>
</div>

问题：

当我运行程序时，<div>中只有一个显示检索到的图像，另一个<div>保持空白。因此，只有<div id="page_content" ....>显示从ajax调用中检索到的图像列表，另一个<div id="displayPage"..... >显示空白div，不显示任何图像列表。当我检查开发人员代码时，没有错误。

发生了什么事？请帮忙。

谢谢。

Answer 1

retrieve函数可能有一个硬编码的div id，它将结果附加到同一个div。您可能希望使用$（this）并为调用找到适当的上下文并交换div ID。

不显示<div>中的图像

1 个答案: