Jquery 图像投票

Question

我正在使用下面的代码制作一个简单的图像投票系统，但我遇到了一个问题， 我想单独显示每张图片的投票结果。

当有人按赞按钮时，赞 div 必须只出现在投票的图片上。

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代码:

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

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

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

});
</script>

体内:

<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>

希望对我有帮助。

谢谢大家

Answer 1

我想这就是您要找的:

$(".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();
});

也就是说，当单击图像时，通过 DOM 向上导航到包含 pborder 的 div，然后找到 dovted 和 lvoted仅限该容器内的元素。

顺便说一句，您的 html 无效:id 属性应该是唯一的，但您在 ptitle 上重复了相同的 id > 和 ppicdiv div。这些应该更改为类而不是 id，或者如果您不在 JS 或 CSS 中使用它，甚至可能从这些 div 中完全删除该属性。