div의 ID를 동적으로 변경 하시겠습니까?

Question

나는 id가 이상한 div가 여러 개 있고 각각에 비디오가 들어 있습니다. 그것들은 실제로 비디오 퍼가기 코드이지만 나에게 평범하지 않습니다. 여기에 하나의 예가 있습니다 :

<div id="evp-1fae4e37639894816f03591bc7009c68-wrap" class="evp-video-wrap"></div><script type="text/javascript" src="http://domain.com/evp/framework.php?div_id=evp-1fae4e37639894816f03591bc7009c68&id=cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg%3D%3D&v=1278525356"></script><script type="text/javascript">_evpInit('cmVsYXRpb25zaGlwLW1hcmtldGluZy0xLmZsdg==');</script> 

내가하고 싶은 것은 비디오 재생 목록을 만드는 것입니다. 그 일환으로 onclick 속성을 사용하여 JS 함수를 트리거하여 동영상을 전환하는 div를 사용하여 목록을 만들었습니다. 여기 보이는 방법은 다음과 같습니다

<div class="vid-list" onclick="switchvideo('http://domain.com/html-vids/headline-vids/second-vid.html', 2)"><p>This a video tutorial for blah blah blah.</p></div> 

문제는, 나는 또한 그렇지 않으면 작동하지 않기 때문에 다른 비디오 소스 코드 변경의 DIV id를 전환 할 때마다. 그래서 div 내에서 비디오 스크립트를로드하기 전에이를 변경해야합니다. 나는 다음 JS 함수를 사용하여이를 달성하려고 시도했다.

function switchvideo(url, vidnumber) 
{ 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    xmlhttp.open("GET",url,false); 
    xmlhttp.send(null); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    xmlhttp.open("GET",url,false); 
    xmlhttp.send(); 
    } 

var div_node = document.getElementByClass('evp-video-wrap'); 

if (vidnumber == 2) { 
    div_node.id = 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap'; 
    } 
document.getElementById(div_node.id).innerHTML=xmlhttp.responseText; 
} 

분명히 작동하지 않는 것 같다. 문제는 위의 굵은 선으로 의심됩니다. div_node.id '를 사용하여'class '및 해당 ID로 요소를 가져 오려고했습니다. 나는 'document.getElementByClass'를 수행함으로써 그 요소에 대한 참조를 얻었으므로이 요소를 사용하여 다른 속성을 조작 할 수 있다고 가정합니다. 그러나 나는 확실하지 않다. .. 누군가 pls가 나를 계발시킬 수 있었느냐?

Answer 1

getElementByClass() 방법이 없습니다. getElementByClassName()이 있지만 모든 브라우저에서 사용할 수있는 것은 아닙니다. 여기

은 당신이 사용할 수있는 하나입니다

// http://www.dustindiaz.com/getelementsbyclass/ 
function getElementsByClass(searchClass, node, tag) { 
    var classElements = new Array(); 
    if (node == null) node = document; 
    if (tag == null) tag = '*'; 
    var els = node.getElementsByTagName(tag); 
    var elsLen = els.length; 
    var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"); 
    for (i = 0, j = 0; i < elsLen; i++) { 
    if (pattern.test(els[i].className)) { 
     classElements[j] = els[i]; 
     j++; 
    } 
    } 
    return classElements; 
} 

그런 다음 당신은 당신의 아약스 조금 까다 롭습니다

getElementByClass('evp-video-wrap'); 

로 호출 할 수 있지만, 여기에 하나 더 일반적이다 :

function getXmlHttpObject() { 
    var xmlHttp; 
    try { 
     // Firefox, Opera 8.0+, Safari 
     xmlHttp = new XMLHttpRequest(); 
    } catch (e) { 
     // Internet Explorer 
     try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    } 
    if (!xmlHttp) { 
     alert("Your browser does not support AJAX!"); 
    } 
    return xmlHttp; 
} 


function ajax(url, onSuccess, onError) { 

    var xmlHttp = getXmlHttpObject(); 

    xmlHttp.onreadystatechange = function() { 
     if (this.readyState === 4) { 

      // onSuccess 
      if (this.status === 200 && typeof onSuccess == 'function') { 
       onSuccess(this.responseText); 
      } 

      // onError 
      else if(typeof onError == 'function') { 
       onError(); 
      } 
     } 
    }; 
    xmlHttp.open("GET", url, true); 
    xmlHttp.send(null); 
    return xmlHttp; 
} 

마지막으로 대구 전자가된다 :

function switchvideo(url, vidnumber) { 
    var div_node = getElementByClass('evp-video-wrap')[0]; 

    // make a call to the url, and execute the 
    // callback when the response is available 
    ajax(url, function(responseText ){ 
    if (vidnumber == 2) { 
     div_node.id = 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap'; 
    } 
    document.getElementById(div_node.id).innerHTML = responseText;  
    }); 
}​ 

당신은 표준 방법이 아닙니다 전체 코드 [here]

Answer 2

getElementByClass을 볼 수 있습니다. 이 프레임 워크를 사용할 수 있습니까? jQuery에는 다른 프레임 워크와 마찬가지로 클래스별로 요소를 검색하는 좋은 메커니즘이있다. 또한 브라우저 간 지원 방식으로 AJAX 비트를 훨씬 쉽게 처리 할 수 ​​있습니다.

function switchvideo(url, vidnumber) 
{ 
    $.get(url, function(data) { 
      var div_node = $('.evp-video-wrap'); 
      if (vidnumber == 2) { 
      div_node.attr('id', 'evp-78c0b7c4f6d3377954825f145734fd5c-wrap'); 
      } 
      div_node.html(data); 
    }); 
} 

대안은별로 DIV를 검색 할 자신의 getElementByClass 또는 특정 코드를 작성하는 것입니다. 참고 : 첫 번째 경기에만 관심이 있다고 가정합니다.

function getDivByClass(klass) 
{ 
    var regex = new RegExp('(^|\\s+)' + klass + '(\\s+|$)'); 
    for (div in document.getElementsByTagName('div')) { 
     if (regex.text(div.className)) { 
      return div; 
     } 
    } 
    return null; 
}