Смяна на картинка след клик

[vinsbg]

Здравейте,

сега дойде ред да ви позанимавам с HTML/JS частта от прословутата вотинг система. Изникна друг проблем.

По начина по който работи има 2 снимки за 'up' и 2 за 'down'
- up.png
- up_off.png
- down.png
- down_off.png
съответно, когато се натисне бутона up снимката се сменя на up_off.png и бутона става неактивен - disabled.

Проблема е че сега като натисна 'up' всичко изчезва, но, като посоча с мишката мога да натисна на 'невидимите' бутони.

Това е функцията и мисля, че в if(vote_rank_status == 1) и if(vote_rank_status == -1) се случва смяната...

function addVote(image_id,vote_rank) {
	$.ajax({
		url: "add_vote.php",
		data:'image_id='+image_id+'&vote_rank='+vote_rank,
		type: "POST",
	beforeSend: function(){
		$('#links-'+image_id+' .btn-votes').html("<img src='loaderIcon.gif' />");
	},
	success: function(vote_rank_status){
		var votes = parseInt($('#votes-'+image_id).val());
		var vote_rank_status;
		switch(vote_rank) {
			case "1":
			votes = votes+1;
			break;
			case "-1":
			votes = votes-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);
		}
			
			
	});
}

А тук са на страницата

      // тук е заявката за изкарване на броя гласове....
       $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>
 </div>

И цсс-а за тях ако потрябва..

.btn-votes input[type="button"]{
    width:30px;
    height:32px;
    border:0;
    
    cursor:pointer; 
    margin-bottom: -20px; 
    display:inline-block;
    background:none;

}
.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');
}
.label-votes {
    font-size:1.0em;
    color:#40CD22;
    text-align:center;
    font-weight:bold;
    display:inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

 

[anonimen]

Най-добре пъхни пример в jsfiddle да можем да тестваме :?:
Иначе ако server-side-а работи правилно, не би трябвало това да ти е проблем.

 

[vinsbg]

Когато е само HTML и JS работи и затова няма как да пусна jsfiddle, но като вкарам и pHP-то в действие, за да стане динамично и се прецаква.

Т.е. според теб проблема не е в тази част, а в PHP частта?

 

[anonimen]

Когато е само HTML и JS работи и затова няма как да пусна jsfiddle, но като вкарам и pHP-то в действие, за да стане динамично и се прецаква.

Т.е. според теб проблема не е в тази част, а в PHP частта?

Доколкото разбирам проблемът ти е само в изобразяването на елементите, иначе самото гласуване работи коректно? (без да записва един глас 2 пъти и разни такива)

 

[vinsbg]

Да, работи коректно самото гласуване.

При зареждане на снимката 2 те изображения - Up и Down са бели. Когато се гласува с едно от двете това, което е натиснато трябва да стане сиво(не активно), а другото да си остане бяло(активно). Тогава ако се натисне бялото(активното) то ще стане сиво(неактивно), а другото става активно(бяло)

Това е принципа на работа. В момента, което и да се натисне просто изчезват двата бутона, но като се посочи с мишката върху местата, където са може да се натисне на бутона, който в момента е бял(активен)
..