Question

我需要根据用户选择的图像将远程html页面的div加载到当前页面。

此过程是指当用户点击当前页面侧边栏中的任何图片时，例如load_page.html它将从snippets.html加载所需的div并将其附加到容器div

以下是我在load_page.html中的容器div的html代码： -

<div id="container">
   <div class="section">
       <h2>example heading</h2>
       <p>this is an example paragraph.</p> 
   </div>
</div>

以下是单个图像的代码（用户点击它以加载所需的div）：

<div class="load_snippet" data-snippet="1">
  <img src="image.png" alt="image"/>
</div>

当用户点击上面的图片/ div时，数据片段值将作为请求发送，以在片段页面中加载具有相同ID的div

以下是代码段页面中的代码：

 <div class="section" id="1">
    <p> this is a snippet. i will be loaded when the user requests me </p>
 </div>

以下是应该加载div的jquery代码：

    $(function(){
        $('.load_snippet').on('click', function(){
             var snippet = $(this).data('snippet');
           $('#container').load('assets/snippets.html #'+snippet);
       });
    });

它不能正常工作它清除容器div.i中的所有内容只是希望它被附加在容器div中。

在我的代码段页面中只有html div。

请帮助

Answer 1

好吧 - 如果你想添加新内容，只需创建一个div，然后放置你的内容：

$(function(){
    $('.load_snippet').on('click', function(){
         var snippet = $(this).data('snippet');
       $('#container').append($('<div>').load('assets/snippets.html #'+snippet));
   });
});

从远程html页面加载div并将其附加到当前页面

1 个答案: