Modifier dynamiquement l'identifiant d'une div?

Question

J'ai un tas de divs avec un ID bizarre et chacun d'eux contient une vidéo. Ce sont des codes intégrés à la vidéo, mais ils ne me sont pas habituels. Voici un exemple:

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

Ce que je veux faire est de créer une liste de lecture vidéo. Dans le cadre de cela, j'ai créé une liste en utilisant des divs qui utilisent l'attribut onclick pour déclencher ma fonction JS pour basculer entre les vidéos. Voici à quoi il ressemble:

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

Le problème est, à chaque fois que je passe à une autre vidéo div id des modifications du code embed aussi parce que sinon cela ne fonctionnera pas. J'ai donc besoin de changer cela avant de charger le script vidéo dans le div. J'ai essayé d'y parvenir en utilisant la fonction JS suivante:

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

Apparemment, cela ne fonctionne pas. Je pense que le problème sont les lignes en gras ci-dessus. J'ai essayé d'obtenir l'élément par 'class' et son identifiant en utilisant 'div_node.id'. Je suppose qu'en faisant 'document.getElementByClass', j'obtiens la référence à cet élément afin que je puisse l'utiliser pour manipuler ses autres attributs. Mais je ne suis pas sûr ... Quelqu'un pourrait-il m'éclairer ??

Answer 1

Il n'existe pas de méthode getElementByClass(). Il y a un getElementByClassName() mais ce n'est pas disponible dans tous les navigateurs.

Voici que vous pouvez utiliser:

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

Ensuite, vous pouvez l'appeler comme

getElementByClass('evp-video-wrap'); 

Votre ajax est un peu difficile, mais voici une question plus générale:

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

Enfin votre morue e devient:

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

Vous pouvez voir tout le code [here]

Answer 2

getElementByClass n'est pas une méthode standard. Est-il possible pour vous d'utiliser un cadre pour cela? jQuery a un bon mécanisme pour rechercher un élément par classe, comme le font les autres frameworks. Cela rend également beaucoup plus facile de faire les bits AJAX d'une manière supportée par plusieurs navigateurs.

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

Une alternative serait d'écrire votre propre getElementByClass ou un code spécifique à la recherche d'un DIV par classe. Note: Je suppose que vous êtes uniquement intéressé par le premier match.

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