1

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

当有人按下喜欢按钮时，Like 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>

我希望能帮助我。

谢谢你们。

4

1 回答 1

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 向上导航到包含pborderdiv，然后仅在该容器中找到dovted和项。lvoted

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

于 2013-02-08T20:50:22.710 回答