JS 배열 onclick을 순환하고 DOM에 값을 쓰십시오.

이 JavaScript 배열에는 50 개의 YouTube 동영상 ID와 처음 두 개의 동영상을 DOM에 쓰는 while 루프가 있습니다. 이 코드는 백 슬래시에 대해 궁금한 점을 대비하여 PHP를 사용하여 인쇄됩니다.JS 배열 onclick을 순환하고 DOM에 값을 쓰십시오.

<script type="text/javascript"> 
var videoArr=["id1", "id2", etc.]; 
var i = 0; 
while (i<2) { 
document.write(\'<iframe width="400" height="225" src="http://www.youtube.com/embed/ \'+videoArr[i]+\'?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>\'); 
i++; 
} 
</script>

그래서 기본적으로 나는이 배열을주기는 DOM에 다음 또는 이전이 비디오를 기입하는 '이전'과 '다음'버튼을해야합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

출처

2012-07-03 AzzyDude

이미 글로벌 범위에서 var i을 선언 했으므로 i을 증가 또는 감소시키고 DOM에 추가하는 기능 만 필요합니다. DOM이 이미로드 된 document.write()이 아니라 <body>에 추가해야합니다.

// i is at global scope 
var i = 0; 
function previousVideo() { 
    // Only if you're not already at the beginning of the array 
    if (i > 0) { 
    i--; 
    // You tagged this jQuery, so here's the simpler jQuery solution 
    appendVideo(i); 
    } 
} 
function nextVideo() { 
    // Only if you're not already at the end of the array 
    if (i < videoArr.length - 1) { 
    i++; 
    appendVideo(i); 
    } 
} 
// Appends a new iframe to the <body> 
function appendVideo(i) { 
    $("body").append('<iframe width="400" height="225" src="http://www.youtube.com/embed/' + videoArr[i] + '?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>'); 
}

몇 가지 새로운 버튼을 만들고 그들에게 기능을 previousVideo() 및 nextVideo()을 결합한다.

편집 : 매번 두 개의 비디오를 추가하고 싶습니다. 이 경우 다음 기능을 이전 & 번으로 호출하십시오. 두 번 클릭하면 번 클릭하십시오. 배열의 끝까지 읽으면 하나만 추가됩니다.

$('#yourbutton').click(function() { 
    // Get rid of the old ones 
    $('body').remove('iframe'); 
    // And write two new ones. 
    previousVideo(); 
    previousVideo(); 
});

출처

2012-07-03 12:59:55

안녕하세요. 감사합니다. 한 번에 2 개의 비디오를 추가하는 것이 매우 중요합니다. 클릭당 두 번 함수를 어떻게 호출합니까? 또한이 코드를 사용하면 버튼을 클릭 할 때만 비디오가 나타납니다. 배열에있는 처음 두 개의 동영상은 처음부터 있어야합니다. – AzzyDude

@AzzyDude 내가 추가 한 클릭 이벤트 예를 참조하십시오. –

고마워, 그게 효과가 있지만,이 방법은 실제로 적합하지 않습니다. 처음 두 개의 동영상은 DOM이로드 될 때 표시해야하며 이전 및 다음 버튼은 현재 두 개의 동영상을 배열의 다음 두 개로 바꾸기위한 것입니다. 코드는 이미 이미있는 비디오 옆에 새로운 비디오 두 개를 추가하는 것입니다. – AzzyDude

JS 배열 onclick을 순환하고 DOM에 값을 쓰십시오.

답변

관련 문제