2016-06-27 1 views
-1

Мой главный вопрос заключается в том, как я могу скрыть только текущий DIV, который я нажимаю ... пожалуйста, предложите мне, что я могу сделать для этогоКак скрыть DIV, нажав кнопку якорный на этом селекторе



$('.ads-close-btn').click(function() { 
 
    $('.full-width-add').hide("slow"); 
 
    }); 
 

 
alert('MY main question is how can i hide only current div');
.a_text { 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/16f70ff438.js"></script> 
 
<!--First add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--second add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--third add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--4th add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div>


Мой главный вопрос заключается в том, как я могу скрыть только текущий DIV, который я нажимаю ... пожалуйста, предложите мне, что я могу сделать для этого


ответ

0

просто добавьте эту строку

$(this).parents('.full-width-add:first').hide("slow"); 

вместо

$('.full-width-add').hide("slow"); 

$('.ads-close-btn').click(function() { 
 
    $(this).parents('.full-width-add:first').hide("slow"); 
 
});
.a_text { 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/16f70ff438.js"></script> 
 
<!--First add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--second add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--third add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div> 
 
<!--4th add div--> 
 
<div class='full-width-add'> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn'><i class='fa fa-close'></i></a> 
 
</div>

0

Добавить this с parents функцией

$('.ads-close-btn').click(function() { 
    $(this).parents('.full-width-add').hide("slow"); 
    }); 

https://jsfiddle.net/w8fv6os7/

+0

спасибо большое –

0

Когда вы пишете

$('.full-width-add') 

вы фактически выбирающий все элементы с .Full ширины добавьте класс.

Попробуйте заменить вашу функцию:

$('.ads-close-btn').click(function() { 
$(this).parent().hide("slow"); 
}); 

Таким образом, вы только выбрать родителя кнопки закрытия.

1

Попробуйте сочетание this с JQuery closest()

$('.ads-close-btn').click(function() { 
$(this).closest('.full-width-add').hide("slow"); 
}); 
+0

Отвечайте только с ** правильные ** 'ближайших()' 'не родителей()'/'родитель()' –

+0

@ freedomn-м, что проблема с '.parent()' здесь ... все div's отличаются друг от друга, поэтому '.parent()' отлично работает здесь. –

+0

@GauravAggarwal «отлично работает * здесь *» и при * просто * этот конкретный экземпляр - да. Завтра OP решает добавить кнопку редактирования, а для аккуратности хочет поместить ее в поле рядом с кнопкой закрытия, то есть с дополнительным 'div' между текущим« родителем »и текущим« закрытием »- bang ... code перестает работать, ОП не знает, почему. Зачем? потому что они использовали 'parent()', который является слишком жестким и блокирует код в вашем макете html, что не было основанием для этого. –

0

Ниже приведены фрагмент кода для того же.

$('.ads-close-btn').click(function() { 
 
    var curId=$(this).attr('id'); 
 
     $('#div'+curId).hide("slow"); 
 
    }); 
 

 
alert('MY main question is how can i hide only current div');
.a_text { 
 
    color: red; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://use.fontawesome.com/16f70ff438.js"></script> 
 
<!--First add div--> 
 
<div class='full-width-add' id="div1"> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="1"><i class='fa fa-close' ></i></a> 
 
</div> 
 
<!--second add div--> 
 
<div class='full-width-add' id="div2"> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="2"><i class='fa fa-close' i></i></a> 
 
</div> 
 
<!--third add div--> 
 
<div class='full-width-add' id="div3"> 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="3"><i class='fa fa-close' ></i></a> 
 
</div> 
 
<!--4th add div--> 
 
<div class='full-width-add' id="div4" > 
 
    <div class='a_text'>some text</div> 
 
    <a href='#' class='ads-close-btn' id="4"><i class='fa fa-close' ></i></a> 
 
</div>