使用jquery循环返回json

Question

我正在获取JSON中返回的图像和超链接信息。如果可能的话，我想使用循环插件。

示例：[["1.jpg","http:\/\/www.this.net\/"],["2.jpg","http:\/\/www.that.net\/"],["3.jpg","http:\/\/www.what.com/l"]]

首次加载我的html页面时，它已经有了这个：

<div id="container"><a id="changeLink" href="o.html" target="_blank"><img id="changeImage" src="100.jpg" /></a>

使用返回的JSON，我想循环遍历图像路径/链接，并每4秒更新一次changeLink和changeImage元素。在它结束之后，我想重复一遍。

加载页面时：

<a id="changeLink" href="http://www.this.net" target="_blank"><img id="changeImage" src="1.jpg" /></a>

4秒后：

<a id="changeLink" href="http://www.that.net" target="_blank"><img id="changeImage" src="2.jpg" /></a>

8秒后：

<a id="changeLink" href="http://www.what.com" target="_blank"><img id="changeImage" src="3.jpg" /></a>

12秒后：

<a id="changeLink" href="http://www.this.net" target="_blank"><img id="changeImage" src="1.jpg" /></a>

16秒后：

<a id="changeLink" href="http://www.that.net" target="_blank"><img id="changeImage" src="2.jpg" /></a>

20秒后：

<a id="changeLink" href="http://www.what.com" target="_blank"><img id="changeImage" src="3.jpg" /></a>

等等。

Answer 1

听起来您想要获取返回的JSON，使用它在DOM中生成<img>元素，src属性指向JSON中的URL，然后应用功能循环图像。

这可以使用例如 cycle plugin 来实现。像下面这样的东西应该工作。 注意：未经测试

   $.getJSON('jsonArray.php', function(data){
      var imgs = $.map(data, function (e, i) {
          return $('<img>').attr('src', e[1] + e[0]);
      });
      $('#container-for-imgs')
          .append(imgs)
          .find('img')
          .cycle({
              fx: 'fade'
          }); 
   });

修改

在回应评论时，我想你想做这样的事情。如果我误解了

，你将会更具体

   $.getJSON('jsonArray.php', function(data){
      var change = ['changeLink', 'changeImage'],
          anchors = $.map(data, function (e, i) {
              var anchor = $('<a target="_blank" >').attr('href', e[1]).attr('id', change[0] + i);
              return $('<img>').attr('src', e[0]).attr('id', change[1] + i).appendTo(anchor);
          });
      $('#container-for-elements')
          .append(anchors);
   });