0

这可能是一个简单的问题，但我对 JS 不熟悉。我正在使用带有评论评级插件的 Wordpress 来显示 2 个评论循环 - 1 个按“拇指”评级排序，第二个按标准顺序排序。

问题：

当在标准部分的评论旁边单击拇指时，投票将添加到评级部分的评论中 - 因为它在网站上的代码中首先被调用。在页面刷新之前，标准部分评级框不会更新。

预期 内容：点击投票后，同一评论的评分应在评分和标准循环部分中更新。

代码：

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

2 回答 2

1

在 DOM 中，ID 必须是唯一的，您不能有两个具有相同 ID 的元素，并且正如您的标题所暗示的，在这种情况下，getElementById 函数将占据第一个。

您可以使用 ID-standard、ID-rated 之类的表示法或使用 jQuery 及其选择器

于 2013-05-04T12:21:55.087 回答
0

根据HTML 规范，“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]'
    }
}
于 2013-05-04T13:04:08.137 回答