0

好的，我有一个函数可以获取 vine 推文，然后通过 iFrame 显示视频。这很好用，唯一的问题是我不想一次全部列出，我只想显示一个，然后在完成后显示下一个。这可能很简单，但我一直在看代码很长时间，现在我想不通。请帮忙。

         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();

            });
4

2 回答 2

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 example above assumes you have some kind of button with an id=next that when clicked appends the next item to results e.g

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

If you want to replace the current video then use

        $('#results').html(output[currentKey]);   
       //  instead of
       $('#results').append(output[currentKey]);
于 2013-03-01T17:02:59.087 回答
1

EDIT:

Sounds like you would want something like this:

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>');

                    }

Then in here:

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

You could also however change the forloop to populate output with the src and then in the foreach do something like this:

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

If you want to display an iframe one at a time with your setup:

You may want to use the each() function:

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

In place of the:

$("#results").html(output);
于 2013-03-01T17:07:13.057 回答