使用 jquery 循环返回 json

发布于 2024-09-10 16:28:22 字数 1446 浏览 3 评论 0原文

我正在获取 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>

依此类推。

原文

I am getting image and hyperlink information returned in the JSON. I'd like to use the cycle plugin if possible.

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

When my html page is first loaded it will already have this:

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

Using the returned JSON, I'd like to loop through the image paths/links and update the changeLink and changeImage elements every 4 seconds. After it's reached the end, I'd like for it to repeat.

When page is loaded:

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

After 4 seconds:

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

After 8 seconds:

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

After 12 seconds:

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

After 16 seconds:

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

After 20 seconds:

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

And so on.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

⊕婉儿 2024-09-17 16:28:22

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

例如，这可以使用cycle 插件来实现。像下面这样的东西应该有效。 注意：未经测试

   $.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);
   });

It sounds like you would like to take the returned JSON, use it to generate <img> elements in the DOM with the src attibute pointing to the URLs in the JSON and then apply functionality to cycle through the images.

This can be achieved using, for example, the cycle plugin. Something like the following should work. Note: untested

   $.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'
          }); 
   });

EDIT:

In response to the comment, I think you would like to do something like this. You will ned to be more specific if I have misinterpreted

   $.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);
   });

回复收藏 0 原文

~没有更多了~