2013-03-01 1 views
0

У меня есть функция, которая получает винные твиты, а затем отображает видео через iFrame. Это прекрасно работает, единственная проблема заключается в том, что я не хочу перечислить их всех сразу, я просто хочу, чтобы они отображались, а затем закончили отображать следующий. Вероятно, это довольно просто, но я долго смотрел на код, и теперь я не могу думать прямо. Пожалуйста помоги.JQuery цикл через выходной буфер с использованием .each()

  function getTweets() { 
        var url='http://search.twitter.com/search.json?callback=?&q=givingvine'; 
        $.getJSON(url,function(json){ 

        //setup an array to buffer output 
        var output = []; 

        //a for loop will perform faster when setup like this 
        for (var i = 0, len = json.results.length; i < len; i++) { 
        //instead of appending each result, add each to the buffer array 
        output.push('<p>' + '<iframe class="video" src="' + json.results[i].text.substr(json.results[i].text.indexOf("http")) +'" frameborder="0" width="1080" height="800" style="margin:-155px -100px -130px -60px;"></iframe>' + '</p>'); 

        } 

       //now select the #results element only once and append all the output at once, then slide it into view 
        $.each(output, function (intIndex, objValue) { 
        $("#results").html(objValue); 
        }); 
       }); 
       } 
       //set an interval to run the getTweets function (30,000 ms is 5 minutes), you can cancel the interval by calling clearInterval(timer); 
       var timer = setInterval(getTweets, 10000); 
       clearInterval(timer); 
       //run the getTweets function on document.ready 
       getTweets(); 

      }); 

ответ

1

Если я правильно вас понимаю, вы хотите сохранить результаты на выходе, а затем добавьте первый вариант в #results. Затем, когда пользователь что-то делает, добавляет еще один?

Я хотел бы предложить вам сохранить текущее «место» в переменной, а затем, когда пользователь делает то, что вы хотите добавить следующий, увеличиваем его на 1

что-то вроде

var output =[],currentKey =0; 
    function getTweets() { 
       var url='http://search.twitter.com/search.json?callback=?&q=vine'; 
       $.getJSON(url,function(json){ 

       //setup an array to buffer output 


       //a for loop will perform faster when setup like this 
       for (var i = 0, len = json.results.length; i < len; i++) { 
       //instead of appending each result, add each to the buffer array 
       output.push('<p>' + '<iframe class="video" src="' + json.results[i].text.substr(json.results[i].text.indexOf("http")) +'" frameborder="0" width="1080" height="800" style="margin:-155px -100px -130px -60px;"></iframe>' + '</p>'); 

       } 

      //now select the #results element only once and append all the output at once, then slide it into view 
       $("#results").html(output[currentKey]); 
      }); 
      } 

     getTweets(); 

     $('#next').click(function(){ 
      currentKey +=1; 
      if(currentKey < output.length){ 
     $('#results').append(output[currentKey]); 
     } 
     }); 

The Приведенный выше пример предполагает, что вы имеете какую-то кнопку с идентификатором = рядом, что при нажатии добавляет следующий элемент к результатам, например

<button id="next">Next Video</button> 

Если вы хотите, чтобы заменить текущее видео, то использовать

 $('#results').html(output[currentKey]); 
     // instead of 
     $('#results').append(output[currentKey]); 
+0

Это что-то, что я ищу, я не хочу кнопку, которую я хочу, чтобы она переключалась после определенного ic interval – Christopher

+0

Затем замените функцию «щелчок» на window.setInterval (function() {// код выше в функции щелчка здесь}, 10000); // 10 секунд. Интервал должен быть сохранен в переменной, чтобы вы могли убить его, когда длина элементов была достигнута. – TommyBs

1

EDIT:

Похоже, вы хотели бы что-то вроде этого:

output.push('<p>' + '<iframe id="iframe' + i.toString() + '" class="video" src="' + json.results[i].text.substr(json.results[i].text.indexOf("http")) +'" frameborder="0" width="1080" height="800" style="margin:-155px -100px -130px -60px;"></iframe>' + '</p>'); 

        } 

Тогда здесь:

   $.each(output, function (intIndex, objValue) { 
       $("#results").html(objValue); 
       //Some Timer code here; 
       //Remove previous iframe, add a new iframe 
       $('#results').empty(); 
       }); 

Вы также можете однако изменить forloop для заполнения вывод с помощью src, а затем в foreach сделать что-то вроде этого:

   $.each(output, function (intIndex, objValue) { 
       $("#iframe").attr('src', objValue) 
       //Some Timer code here; 
       }); 

Если вы хотите, чтобы отобразить IFRAME поштучно с вашей установкой:

Вы можете использовать функцию каждую():

$.each(output, function (intIndex, objValue) { 
    $("#results").html(objValue); 
}); 

На месте :

$("#results").html(output); 
+0

Да, это близко к тому, что я хочу. Что бы я добавил, чтобы включить iframe в следующий массив? – Christopher

+0

Для этого вместо выбора результатов и применения html вам нужно будет выбрать iframe - через его класс или добавив атрибут ID в тег. Так что вроде $ ('iframe'). Html (objValue); – RenegadeMatrix

+0

Я действительно не так хорош в JQuery, как бы я мог это сделать, когда iframe генерируется внутри цикла for? – Christopher

Смежные вопросы