Question

我有一个脚本ajax / php进行投票。它使用4张图片，点击前2张，点击后2张。

按钮＆＃39; up＆＃39;按下按钮，向上禁用和相同。想法是当用户点击按钮up然后按钮更改为up-disable，即无法再点击它。按下按钮的Sam。

目前，当我点击up按钮up-disable时，似乎没有出现..只是图片没有显示我可以点击那里的空白区域（或者至少改变了鼠标的指针。

这是html＆amp; php部分

   $vote_rank = 0;
   $query = $pdo->prepare("SELECT SUM(vote_rank) as vote_rank FROM ipaddress_vote_map WHERE image_id = :image_id and ip_address = :ip_address");
   $query -> bindParam(':image_id', $_GET['image_id'], PDO::PARAM_INT);
   $query -> bindParam(':ip_address', $ip_address, PDO::PARAM_INT); 
   $row = $query->execute();
   //$rowsa = $pdo->execute();
   $up = "";
   $down = "";

   if(!empty($row[0]["vote_rank"])) {
       $vote_rank = $row[0]["vote_rank"];
       if($vote_rank == -1) {
           $up = "enabled";
           $down = "disabled";
       }
       if($vote_rank == 1) {
           $up = "disabled";
           $down = "enabled";
       }
   }  
   <div class="pull-left" id="links-'.$row["image_id"].'">                                            
     <input type="hidden" id="votes-'.$row["image_id"].'" value="'.$row["votes"].'">
     <input type="hidden" id="vote_rank_status-'.$row["image_id"].'" value="'.$vote_rank.'">
       <div class="btn-votes">
            <input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].',\'1\')"'.$up.' />
                <div class="label-votes">'.$row["votes"].'</div>
            <input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].',\'-1\')"'.$down.'/>  
       </div>

这是js函数

success: function(vote_rank_status){
var votes = parseInt($('#votes-'+image_id).val());
var vote_rank_status;// = parseInt($('#vote_rank_status-'+id).val());
switch(vote_rank) {
    case "1":
    votes = votes+1;
    //vote_rank_status = vote_rank_status+1;
    break;
    case "-1":
    votes = votes-1;
    //vote_rank_status = vote_rank_status-1;
    break;
}
$('#votes-'+image_id).val(votes);
$('#vote_rank_status-'+image_id).val(vote_rank_status);

var up,down;

if(vote_rank_status == 1) {
    up="disabled";
    down="enabled";
}
if(vote_rank_status == -1) {
    up="enabled";
    down="disabled";
}   
var vote_button_html = '<input type="button" title="Up" id="up" onClick="addVote('+image_id+',\'1\')" '+up+' /><div class="label-votes">'+votes+'</div><input type="button" title="Down" id="down"  onClick="addVote('+image_id+',\'-1\')" '+down+' />';    
$('#links-'+image_id+' .btn-votes').html(vote_button_html);
}

和css在哪里是图像。

.btn-votes input[type="button"].up {    
     background-image:url('../up.png');
}

.btn-votes input[type="button"].up:disabled {
     background-image:url('../up_off.png');
}
.btn-votes input[type="button"].down {
     background-image:url('../down.png');    
}
.btn-votes input[type="button"].down:disabled {
     background-image:url('../down_off.png');
}

所以目前我只能看到up.png和down.png。当我向上或向下点击图片up_off.png时，down_off.png并未显示在屏幕上。

Answer 1

您需要在某处实际启用/禁用它们。也许在这里：

//existing code
var vote_button_html = '<input type="button" title="Up" id="up" onClick="addVote(' + image_id + ',\'1\')" ' + up + ' /><div class="label-votes">' + votes + '</div><input type="button" title="Down" id="down"  onClick="addVote(' + image_id + ',\'-1\')" ' + down + ' />';
$('#links-' + image_id + ' .btn-votes').html(vote_button_html);
}
// New code for after the elements have been added to the dom
if (vote_rank_status == 1) {
    $('.btn-votes input[type="button"].up').attr('disabled', 'disabled');
    $('.btn-votes input[type="button"].down').removeAttr('disabled');
}
if (vote_rank_status == -1) {
    $('.btn-votes input[type="button"].up').removeAttr('disabled');
    $('.btn-votes input[type="button"].down').attr('disabled', 'disabled');
}

点击它们后按钮不会出现

1 个答案: