1

以下のコードを使用して簡単な画像投票システムを作成していますが、問題が発生しました。各画像の投票結果を個別に公開したいと思います。

誰かが「いいね」ボタンを押すと、「いいね」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は無効です。属性は一意である必要がありますが、とdividで同じことを繰り返しています。これらはIDではなくクラスに変更する必要があります。JSまたはCSSで使用しない場合は、属性をそれらのdivから完全に削除することもできます。idptitleppicdiv

于 2013-02-08T20:50:22.710 に答える