Question

祝所有人感恩节快乐。

我在使用jQuery + html和Ajax调用构建动态滑动库时遇到了一个问题。

问题：当jQUery将生成的li标记附加到网页时，它会一次添加并显示所有图片，如果我添加li标记到页面我自己一切正常。我的问题：如何动态地将li标签附加到页面，就像我静态地执行它一样（一次只显示一个图像，直到滑块滑动到下一个）。

以下是这种情况：

我有一个jQuery滑块库，可将<li>类之间的所有slider标记转换为幻灯片，例如：

<div class="slider">
  <ul>
    <li>Slide one</li>
    <li>Slide two</li>
  </ul>
</div>

我没有将<li>标签设置为静态，而是在PHP中构建了一个API，用于从数据库中提取图像并以Json格式输出图像链接。示例如下：

[{"pres_photo_link":"http://domain.com/myimage.jpg"},
{"pres_photo_link":"http://domain.com/myimage2.jpg"},
{"pres_photo_link":"http://domain.com/myimage3.jpg"}]

我使用jQuery + Ajax创建<li>标签并动态地在slider > ul标签之间添加图片：

           $.ajax
            ({
                url: "My API URL", 
                type: "POST",
                dataType: "json",
                data: "param=no",
                success: function(data) 
                {
                    for(var i =0;i < data.length;i++)
                    {       
                      var item = data[i];
                        var link =  "'"+item.photo_link+"'";
                      $('.wp_pres_slug').append('<li><a href="#" onClick="openInAppBrowserBlank('+link+');"><img src='+link+' alt="*"/></a></li>');
                  }
                }
            });

然后append这些元素到滑块的div之间的ul标记：

    <div class="slider">
      <ul>
         <div class="wp_pres_slug"></div>
      </ul>
    </div>

编辑1：这是一个jSfiddle，基于它应该如何工作，用li类替换html中的wp_pres_slug标签，看看它不应该是什么做的。 JSfiddle

提前致谢...我会继续研究，看看能不能搞清楚。

PS * Ajax有点粗糙，一旦我把一切都正常工作，我通常会清理它：）

Answer 1

更新了小提琴。

请尝试使用var link = item.photo_link instead of var link = "'"+item.photo_link+"'"; 的 HTML：

<div id="slider"> <a href="#" class="control_next">>></a> <a href="#" class="control_prev"><</a> <ul class="wp_pres_slug">  <li>Slide 1</li> <li>Slide 2</li> </ul> </div>

<强> JQuery的：

var data =[{"photo_link":"http://img1.jurko.net/avatar_16844.gif"}, {"photo_link":"http://img1.jurko.net/avatar_16844.gif"}, {"photo_link":"http://img1.jurko.net/avatar_16844.gif"}]; for(var i =0;i < data.length;i++) { var item = data[i]; var link = item.photo_link; console.log(link); $('.wp_pres_slug').append('<li><a href="#" onClick="openInAppBrowserBlank('+link+');"><img src='+link+' alt="*"/></a></li>'); }

小提琴：http://jsfiddle.net/mad3z8hs/7

jQuery动态地将html附加到div

1 个答案: