Question

我的主要问题是我怎样才能隐藏我点击的当前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 ...请告诉我该怎么办？

Answer 1

尝试将this与jquery closest()

组合使用

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

Answer 2

只需添加此行

即可

$(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>

Answer 3

使用this功能

添加parents

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

https://jsfiddle.net/w8fv6os7/

Answer 4

写作时

$('.full-width-add')

实际上，您正在使用.full-width-add class选择所有元素。

尝试通过以下方式替换您的功能：

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

这样您只需选择关闭按钮的父级。

Answer 5

以下是相同的代码段。

$('.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>

如何通过单击此选择器上的锚点按钮来隐藏div

5 个答案: