Question

i am using the code bellow to make a simple image voting system but i got a problem,
i want to reveal the voting result individually for each picture.

When someone press like to like button the Like div must appears only at the voted pic.

CSS:

.pborder{
width:150px;
height:247px;
border:4px solid #CCCCCC;
background-color:#FFFFFF;
float:left;
margin-right:10px;
margin-bottom:10px;
z-index:1;
}

#ptitle{
width:140px;
height:18px;
float:left;
margin-left:5px;
margin-top:5px;
background-color:#006699;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-align:center;
font-size:13px;
}


#ppicdiv{
width:140xp;
height:170px;
float:left;
margin-left:5px;
margin-top:5px;
z-index:2;
}

.fholder{
width:140px;
height:38px;
background-color:#000000;
float:left;
margin-left:5px;
margin-top:6px;
z-index:2;
}

.likeup{
width:28px;
height:28px;
float:left;
margin-left:5px;
margin-top:5px;
z-index:3;
cursor:pointer;
}

.likedown{
width:28px;
height:28px;
float:right;
margin-right:5px;
margin-top:5px;
z-index:3;
cursor:pointer;
}

.lvoted{
width:130px;
height:30px;
text-align:center;
color: #FF0000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
position:absolute;
margin-top:40px;
margin-left:5px;
z-index:4;
background-image:url(../image/votedbg.png);
background-repeat:repeat-x;
display:none;
}

.dvoted{
width:130px;
height:30px;
text-align:center;
color: #FF0000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:22px;
position:absolute;
margin-top:40px;
margin-left:5px;
z-index:4;
background-image:url(../image/votedbg.png);
background-repeat:repeat-x;
display:none;
}

Jquery Code:

<script type="text/javascript">
$(document).ready(function(){

$(".likeup").click(function() {
$('.dvoted').hide();
$('.lvoted').show();
});

$(".likedown").click(function() {
$('.lvoted').hide();
$('.dvoted').show();
});

});
</script>

Inside Body:

<div class="pborder">
<div id="ptitle">Image one</div>
<div id="ppicdiv">
<div class="lvoted">Like</div>
<div class="dvoted">Dislike</div>
<img src="image/1.jpg" border="0" />
</div>
<div class="fholder">
<div class="likeup"><img src="image/like.jpg" border="0" width="28" height="28" /></div>
<div class="likedown"><img src="image/dislike.jpg" border="0" width="28" height="28" /></div>
</div>
</div>


<div class="pborder">
<div id="ptitle">Image two</div>
<div id="ppicdiv">
<div class="lvoted">Like</div>
<div class="dvoted">Dislike</div>
<img src="image/2.jpg" border="0" />
</div>
<div class="fholder">
<div class="likeup"><img src="image/like.jpg" border="0" width="28" height="28" /></div>
<div class="likedown"><img src="image/dislike.jpg" border="0" width="28" height="28" /></div>
</div>
</div>

I hope to help me.

Thank you all.

Answer 1

I think this is what you’re looking for:

$(".likeup").click(function() {
   $container = $(this).closest('.pborder');
   $container.find('.dvoted').hide();
   $container.find('.lvoted').show();
});

$(".likedown").click(function() {
   $container = $(this).closest('.pborder');
   $container.find('.lvoted').hide();
   $container.find('.dvoted').show();
});

That is, when the image is clicked navigate up through the DOM to the containing pborder div, and then find the dovted and lvoted items within that container only.

As an aside, your html is invalid: the id attribute should be unique, but you’ve repeated the same id on your ptitle and ppicdiv divs. Those should be changed to classes rather than ids, or possibly even remove the attribute from those divs altogether if you don’t use it in your JS or CSS.