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-standard，ID-rated或使用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]'
    }
}

JS只在onclick响应中更新一个具有相同ID的元素

2 个答案: