動態更改div的ID？

Question

我有一堆div與奇怪的ID和每個人都包含一個視頻。它們實際上是視頻嵌入代碼，但它們對我來說並不常見。這裏有一個例子：

<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> 

我想要做的是創建一個視頻播放列表。作爲其中的一部分，我創建了使用div的列表，這些div也使用onclick屬性來觸發我的JS功能在視頻之間切換。下面是它的外觀：

<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'，我得到了該元素的引用，所以我可以使用它來操縱其他屬性。但我不確定...任何人都可以請賜教嗎？

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

你AJAX是有點棘手，但這裏是一個更普遍的一種：

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; 
} 

最後你的鱈魚E變成：

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

另一種方法是寫自己的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; 
}