перебрать возвращенный JSON с помощью JQuery - PullRequest
1 голос
/ 16 июля 2010

Я получаю информацию об изображении и гиперссылке, возвращенную в формате 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, я бы хотел пройтись по путям / ссылкам на изображения и обновлять элементы changeLink и changeImage каждые 4 секунды.После того, как он достигнут конца, я бы хотел, чтобы он повторился.

Когда страница загружена:

<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>

И так далее.

1 Ответ

0 голосов
/ 16 июля 2010

Звучит так, как будто вы хотите взять возвращенный JSON, использовать его для генерации <img> элементов в DOM с атрибутом src, указывающим на URL-адреса в JSON, а затем применить функциональность для циклического перемещения по изображениям.1003 *

Это может быть достигнуто с использованием, например, плагина цикла .Что-то вроде следующего должно работать. Примечание: не проверено

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