2014-08-31 104 views
0

我使用Ajax加載特定DIV視頻在Ajax調用錨鏈接,這裏是代碼如何使用

<a id="video-thumb" href="javascript:ajaxpage('/wp-content/themes/naked/ajax/loader.php?id_3', 'video-load');"> 
    <div id="thumb" style="background:url(http://img.youtube.com/vi/<?= get_field('youtube_video_id_3'); ?>/maxresdefault.jpg) no-repeat"> 
    <div class="icon"></div> 
    </div> 
    <span><? echo $title_3 ?></span> 
    </a> 

視頻將在「視頻負載」負載的div,我想跳頁面到這個DIV,我該如何實現它?

這是JS(抱歉#2不允許我把這裏更多的代碼)

PASTEBIN

回答

0

的index.html:

<div id="video-load"> 

</div>  

<script> 

function getVideo() 
{ 
var xmlhttp; 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 

    var responeText = xmlhttp.responseText ; // make respone text to variable 
    var diPisah = responeText.split("@") // split respone text each row 
    var no = 0; 
    var diPilahLagi = []; 

     // split and call createVideo function(); 
     for(no ; no <= (diPisah.length - 2) ; no ++){ 
      diPilahLagi = []; 
      diPilahLagi = diPisah[no].split("#"); 
       createVideo( 
       diPilahLagi[0] , // videoId 
       diPilahLagi[1] , // titile 
       diPilahLagi[2] , // url 
       diPilahLagi[3]); // youtube Id 
     } 
    } 
    } 
xmlhttp.open("POST","php/siswa/pindai.php",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("p1=none&p2=none"); 
} 
function createVideo(videoId , title , url , youtubeId){ 
    var vidio_thumb = document.createElement("a"); 
    vidio_thumb.className = "video-thumb"; 
    vidio_thumb.id = "video_thumb_" + videoId ; 
    vidio_thumb.href = "javascript:ajaxpage('/wp-content/themes/naked/ajax/loader.php?id_3', 'video-load');" 

    video-load.appendChild(vidio_thumb); 

    var thumb = document.createElement("div"); 
    thumb.id = "thumb_" + videoId; 
    thumb.style.backgroundImage = "url(" + '"http://img.youtube.com/vi/' + youtubeId + '/maxresdefault.jpg)"' + "no-repeat"; 

    vidio_thumb.appendChild(thumb); 

    var icon = document.createElement("div"); 
    icon.className = "icon"; 

    thumb.appendChild(icon); 

    var titleVid = document.createElement("span"); 
    titleVid.innerHTML = title ; 

    vidio_thumb.appendChild(titleVid); 
} 
</script> 

video.php:

<?php 

include "../connection.php"; 


$sql = "select * from `video`"; 
$jalan = mysql_query($sqlCari); 
while($dataCari = mysql_fetch_array($jalan)){ 

    echo $dataCari[0]; // video id 
    echo "#"; 
    echo $dataCari[1]; // video titile 
    echo "#"; 
    echo $dataCari[1]; // video url 
    echo "#"; 
    echo $dataCari[1]; // video youtube Id 
    echo "@"; 

} 
?> 

並顯示t他的視頻只是打電話

getVideo(); 
+0

錨鏈接在哪裏? – Amir 2014-08-31 14:02:01

+0

錨鏈接處於vidio-load div標記 請參閱function createVidio – Panji 2014-09-01 07:23:34