Fadeout Каждый div отдельно

0

У меня есть некоторые div с уникальными идентификаторами и одним классом mbox. Эти divs содержат некоторую информацию. В нижней части каждого div у меня есть div с тем же классом для всех removeme.

Как это возможно, когда я removeme div с классом removeme чтобы вывести div с помощью класса mbox? Но только 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/

  • 0
    Вы должны также предоставить соответствующий код в вопросе
  • 0
    Код предоставлен, сэр!
Показать ещё 2 комментария
Теги:
fade

3 ответа

2
Лучший ответ

Вы можете использовать .parent() для получения родительского элемента (в этом случае вам нужно 2, чтобы получить родительский .mbox

$('.removeme').click(function () {
    $(this).parent().parent().fadeOut();
});

http://jsfiddle.net/kkd3r/

EDIT: после второго взгляда на jQuery API .parents() будет лучшей идеей, поскольку она пересекает все родительские элементы, чтобы вы могли явно отфильтровывать элементы по классам или идентификатору независимо от того, насколько далеко он находится вверх по дереву

$('.removeme').click(function () {
    $(this).parents('.mbox').fadeOut();
});

http://jsfiddle.net/kkd3r/1/

0

Попробуйте это, надеюсь, он ответит на ваш вопрос..

$('.removeme').click(function () {
     var str=$(this).parent().closest(".mbox");
$(str).fadeOut("fast");
});
0

Заменить эту строку

$(this).fadeOut("fast");

с этим

$(this).closest('.mbox').fadeOut("fast");

Ещё вопросы

Сообщество Overcoder
Наверх
Меню