javascript - <div> 中的图像不显示

Question

功能:

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

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

做了什么:

我创建了 2 个不同的 <div> .我已将第一个和第二个 div 引用到相同的 ajax 调用，最后我将其附加到 <div>编号

代码:

$("#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>

问题:

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

发生了什么？？请帮忙。

谢谢。

Answer 1

检索函数可能有一个硬编码的 div id，它将结果附加到同一个 div。您可能想要使用 $(this) 并为调用找到合适的上下文并交换 div id。