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

也就是说，单击图像时，向上导航到包含pborder div的DOM，然后仅查找该容器中的dovted和lvoted项。

另外，您的HTML无效：id属性应该是唯一的，但您在id和ptitle div上重复了相同的ppicdiv。那些应该更改为类而不是id，或者如果你不在JS或CSS中使用它们，甚至可能完全从这些div中删除属性。

Jquery Image投票

1 个答案: