JavaScript를 사용하여 PHP 에코 된 XML 데이터 표시 및 숨기기

Question

PHP를 사용하여 XML 파일에서 50 개의 비디오 ID를 반향 출력합니다. 나는 비디오 ID를 사용하여 50 개의 YouTube 동영상을 내 웹 사이트에 삽입합니다. 이 잘 작동하지만 한 번에 두 개의 비디오를 격리해야합니다. 사용자가 50 개의 모든 동영상을 한 번에 볼 수 없도록하고 싶습니다.

이

$url = "http://www.theURLofmyXML.blah"; 
$xml = simplexml_load_file($url); 
$i = 0; 

while ($i < 49) { 

$title = (string) $xml->query->results->item[$i]->title; 
$videoid = (string) $xml->query->results->item[$i]->id; 
$explanation = (string) $xml->query->results->item[$i]->explanation; 

$i = $i + 1; 

echo $title."<br />"; 
echo '<iframe width="400" height="225" src="http://www.youtube.com/embed/'.$videoid.'?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br/>'; 
echo $explanation."<br /><br />"; 

} 

가 그래서 가장 좋은 것은 할 생각 : 나는 그들이

여기

내가 지금까지 가지고 무엇을 등 등, 어쩌면 다시 클릭, 또 다른 2를 참조 다음 클릭 한 다음이보고 싶어 0에서 49까지 레이블이 지정된 div 내 페이지에 50 개의 모든 항목을 표시합니다 ... 다음 버튼을 클릭 할 때까지 자바 스크립트를 사용하여 0과 1을 제외한 모든 div를 숨기고 2와 3을 제외한 모든 항목을 숨길 수 있습니다. ...

하지만 JavaScript/jQuery에서이를 수행하는 방법을 잘 모르겠습니다. 나는 .show()와 .hide()를 사용하면 효과가 있지만 구문에 대해서는 잘 모르겠다. HTML에 대한

Answer 1

다음과 같은 HTML 구조 사용할 수 있습니다

<a href="#" class="prev-video-row">Previous videos</a> 
    <div class="video-row active"> 
     <!-- First couple videos --> 
    </div> 
    <!-- Loop through all videos, writing the other rows --> 
    <div class="video-row"> 
     <!-- Last couple videos --> 
    </div> 
    <a href="#" class="next-video-row">Next videos</a> 

을

참고 : 첫 번째 비디오 행에만 active 클래스를 사용하면 페이지로드시 기본적으로 표시됩니다.

CSS를 사용하는 경우 모두 (사용 : display:none;)을 숨기고 .video-row.active (사용 : display:block;) 만 표시합니다. 마지막으로

, 다음과 같은 자바 스크립트 (jQuery를 필요) 비디오 행 사이를 이동하는 데 사용 :

솔직히

jQuery('.prev-video-row').click(function (event) 
    { 
     event.preventDefault(); 
     var prev = jQuery('.video-row.active').prev(); 
     if (prev.length) 
     { 
     jQuery('.video-row').removeClass('active'); 
     prev.addClass('active'); 
     } 
    }); 
    jQuery('.next-video-row').click(function (event) 
    { 
     event.preventDefault(); 
     var next = jQuery('.video-row.active').next(); 
     if (next.length) 
     { 
     jQuery('.video-row').removeClass('active'); 
     next.addClass('active'); 
     } 
    }); 

Answer 2

같은 :

<div id="section0"></div> 

귀하의 JQuery와는 같을 것이다 ... 등등

$(document).ready(function() { 
    $('#section0').show(); 
    $('#section1').show(); 

    $('#nextButton').click(function(e){   
     e.preventDefault(); 
     $('#section0').hide(); 
     $('#section1').hide(); 
     $('#section2').show(); 
     $('#section3').show(); 
     return false; 
    } 
}); 

그리고

Answer 3

말하기, 나는 그것이 50 개 비디오가 페이지에 삽입해야하는 큰 생각하지 않습니다 -에 관계없이 시정 또는 아니; 보이지 않더라도 브라우저에서 처리되기 때문입니다. (틀렸을 때 나를 고칠 수는 있지만 브라우저는 DOM 전체를보고 처리하고 그냥 숨겨진 비트에 스타일을 적용합니다.)

Gustavo Straube는 브라우저와 대역폭 모두에 미치는 영향에도 불구하고 DOM에서 50 가지 요소를 원한다면이 작업을 수행하는 방법에 대한 좋은 대답입니다.

나는 XML을 파싱하는 과정에서 더 많은 정보를 얻으려고 모든 데이터를 JSON으로 저장 한 다음 Mustache.js와 같은 템플릿 프레임 워크와 함께 제공된 HTML에서 jQuery로 동적으로 업데이트합니다. 이 예제 10 ..

$(document).ready(function(){ 
    var template = '{{$title}}<br /><iframe width="400" height="225"' 
     + 'src="http://www.youtube.com/embed/{{$videoid}}?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br/>' 
     + '{{explanation}}<br /><br />'; 
    var html = ''; 
    var i=0; 

    for(; i<10; i++){ 
     var item = json[i]; 
     html += Mustache.to_html(template, item); 
    } 
    $('#videos').html(html); //where #videos is a div to contain your videos 

다음은이 예제 # 다음에 (앵커가 -

/* Generate JSON */ 
$url = "http://www.theURLofmyXML.blah"; 
$xml = simplexml_load_file($url); 
$i = 0; 
$json = array(); 

while ($i < 49) { 

$arr['title'] = (string) $xml->query->results->item[$i]->title; 
$arr['videoid'] = (string) $xml->query->results->item[$i]->id; 
$arr['explanation'] = (string) $xml->query->results->item[$i]->explanation; 

$json[] = $arr; 
} 

echo json_encode($json); 

그런 다음 마크 업 단지 첫 번째 X 비디오를 초기화하기 위해, 아래와 같은 뭔가를) 다음 10 비디오를 얻으려면 ..

$('#next').click(function(){ 
     /* template, i and json are still in scope! */ 
     var j = i+10; 
     for(; i<j; i++){ 
      var item = json[i]; 
      html += Mustache.to_html(template, item); 
     } 
     $('#videos').html(html); //where #videos is a div to contain your videos 
    }); 

이의 장점은

$('#prev').click(function(){ 
     /* template, i and json are still in scope! */ 
     var j = i -10; 
     i -= 20; //10 for the current page, 10 for the start of the previous page 
     for(; i<j; i++){ //rebuild div content of previous page 
      var item = json[i]; 
      html += Mustache.to_html(template, item); 
     } 
     $('#videos').html(html); 
    }); 

그냥-반복 처리를 다시, 이것은 ...이 이전 앵커을 할 수도 쉽게입니다 는 대체 솔루션 - 나는 그것을 제안했습니다 JSON을 사용하면 XML보다 약간 가볍고 유연하며, 한 번에 사용하지 않는 50 개의 DOM 요소가 필요하지 않습니다. 보유하고있는 구현을 선택한 이유가있을 수 있지만,이 문제가 주어지면 구현할 구현이 아닙니다!