JS只更新了一個onclick響應ID相同的元素

Question

這可能是一個簡單的問題，但我對JS並不熟悉。 我使用Wordpress評論評級插件顯示2評論循環 - 1按「拇指」排序評分，第二個與標準命令。

問題：

當點擊一個拇指旁邊的標準部分選票被加入到評級部分評論評論 - 因爲它是第一個叫的代碼上現場。在刷新頁面之前，標準部分評分框不會更新。

預期結果： 單擊投票時，同一評論的評分應當在評分和標準環節中更新。

CODE：

function ckratingcreateXMLHttpRequest(){ 
var xmlhttp = null; 
try { 
    // Moz supports XMLHttpRequest. IE uses ActiveX. 
    // browser detction is bad. object detection works for any browser 
    xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
} catch (e) { 
    // browser doesn’t support ajax. handle however you want 
    //document.getElementById("errormsg").innerHTML = "Your browser doesnt support XMLHttpRequest."; 
    // This won't help ordinary users. Turned off 
    // alert("Your browser does not support the XMLHttpRequest Object!"); 
} 
return xmlhttp; } 
var ckratingXhr = ckratingcreateXMLHttpRequest(); 

function ckratingKarma(id, action, path, imgIndex){ 
ckratingXhr.open('get', 'http\://'+ path +'ck-processkarma.php?id='+ id +'&action='+ action +'&path='+ path +'&imgIndex='+imgIndex); 
ckratingXhr.onreadystatechange = ckratingHandleResponse; 
ckratingXhr.send(null); 
} 

function ckratingHandleResponse(){ 
if(ckratingXhr.readyState == 4){ 
    var response = ckratingXhr.responseText.split('|');  
    if(response[0] == 'done'){ 
     if(response[1]){ 
      //Changes the thumbs to dull gray and disable the action 
      if (response[4] == 'down') { 
       if (document.getElementById("down-"+response[1]) != null) { 
        document.getElementById("down-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'checkmark.png'; 

       } 
      } 
      else { 
       if (document.getElementById("down-"+response[1]) != null) { 
        document.getElementById("down-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'gray_down.png'; 
       } 
      } 
      if (document.getElementById("down-"+response[1]) != null) { 
       document.getElementById("down-"+response[1]).onclick = ''; 
      } 
      if (response[4] == 'up') { 
       if (document.getElementById("up-"+response[1]) != null) { 
        document.getElementById("up-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'checkmark.png'; 
       } 
      } 
      else { 
       if (document.getElementById("up-"+response[1]) != null) { 
        document.getElementById("up-"+response[1]).src = "http://"+response[3]+'images/'+response[6]+'gray_up.png'; 
       } 
      } 
      if (document.getElementById("up-"+response[1]) != null) { 
       document.getElementById("up-"+response[1]).onclick  = ''; 
      } 
      //Update the karma number display 
      if(!response[2]){ 
       alert("Response has no value"); 
      } 
      var karmanumber = response[2]; 
      //The below line is commented out because there is no karma number atm. 
      if (document.getElementById("karma-"+response[1]+"-"+response[4]) != null) { 
       document.getElementById("karma-"+response[1]+"-"+response[4]).innerHTML = karmanumber; 
      } 
      // deal with the single value total 
      if (document.getElementById("karma-"+response[1]+"-total") != null) { 
       document.getElementById("karma-"+response[1]+"-total").innerHTML = response[5]; 
      } 
     } else { 
      alert("WTF ?"); 
     } 
    } 
    else if(response[0] == 'error') 
    { 
     var error = 'Error: '+response[1]; 
     alert(error); 
    } else { 
     /* This causes unnecessary error messages when the icon 
     * is double clicked. 
      alert("Reponse: "+response[0]); 
     alert("Karma not changed, please try again later."); 
     */ 
    } 
} 
} 

var crToggleComment = 0; 

function crSwitchDisplay(id) { 
if (crToggleComment % 2 == 0) { crShowdiv(id); } 
else { crHidediv(id); } 
crToggleComment++; 
} 

// hide <div id='a2' style="display:none;"> tagged div ID blocks 
function crHidediv(id) { 
//safe function to hide an element with a specified id 
if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById(id).style.display = 'none'; 
} 
else { 
    if (document.layers) { // Netscape 4 
     document.id.display = 'none'; 
    } 
    else { // IE 4 
     document.all.id.style.display = 'none'; 
    } 
} 
} 

// show <div id='a2' style="display:none;"> tagged div ID blocks 
// <a href="javascript:crShowdiv('a2');">show a2</a> 

function crShowdiv(id) { 
//safe function to show an element with a specified id 

if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById(id).style.display = 'block'; 
} 
else { 
    if (document.layers) { // Netscape 4 
     document.id.display = 'block'; 
    } 
    else { // IE 4 
     document.all.id.style.display = 'block'; 
    } 
} 
} 

Answer 1

在DOM的ID必須是唯一的，你不能有相同的ID兩個元素，併爲您的標題建議，在這種情況下的getElementById函數意志拿了第一。

你可以使用像ID標準，符號ID級或使用jQuery和選擇

Answer 2

按照HTML Spec的「ID」應該是一個文檔中是唯一的。但是如果你堅持要有多個具有相同ID的元素，你可以遍歷文檔中的所有元素，並選擇具有指定ID的元素進行修改。 （當然這不是很有效!!）
簡短例子：

var idValue = "some-id"; 
var allElements = document.getElementsByTagName("*"); 
for (var i = 0; i < allElements.length; i++) { 
    if (allElements[i].id == idValue) { 
     // Do some stuff with 'allElements[i]' 
    } 
}