[英]Fadeout Each div separately
我有一些具有唯一ID和相同類mbox
div。 這些div擁有一些信息。 在每個div的底部我有一個div與所有divs removeme
相同的類。
當我用類removeme
單擊div以淡出帶有類mbox
的div時,怎么可能? 但只有mbox
而不是旁邊的另一個
我的Html:
<style>
.mbox{
width:300px;
height:280px;
float:left;
margin-left:5px;
margin-right:10px;
margin-bottom:10px;
background-color: #E0E0E0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #CACACA;
}
.removeme{
width:200px; height:45px; float:left; background-color: #F00;
}
.title{
width:290px;
float:left;
margin-left:5px;
margin-top:5px;
text-align:center;
color:#333;
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
font-weight:bold;
}
.photoholder{
width:200px;
height:150px;
float:left;
margin-left:50px;
margin-top:8px;
background-color:#FFF;
}
.imgclass{
float:left;
margin-left:10px;
margin-top:5px;
}
</style>
<div class="mbox" id="1">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<div class="mbox" id="2">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<script type="text/javascript">
$('.removeme').click(function () {
$(this).fadeOut("fast");
});
</script>
檢查我的演示: http : //jsfiddle.net/fWtm6/9/
您可以使用.parent()
來獲取父元素(在這種情況下,您需要2來獲取父.mbox
$('.removeme').click(function () {
$(this).parent().parent().fadeOut();
});
編輯:經過第二次查看jQuery API .parents()
是一個更好的主意,因為它遍歷所有父元素,因此您可以按類或ID顯式過濾元素,無論它在樹上有多遠
$('.removeme').click(function () {
$(this).parents('.mbox').fadeOut();
});
試試這個,希望它會回答你的問題..
$('.removeme').click(function () {
var str=$(this).parent().closest(".mbox");
$(str).fadeOut("fast");
});
替換此行
$(this).fadeOut("fast");
有了這個
$(this).closest('.mbox').fadeOut("fast");
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.