javascript - 找到父DIV的ID并淡出DIV

Question

单击 DIV 本身内的链接时，我试图淡出 DIV。这是我的代码：

$(".hideinfo").click(function () {
  var parentLink = $(this).parent().parent();               
  $(parentLink).fadeTo("slow", 0);
});

我没有直接指定 ID 的原因是因为我想用它来淡出具有不同 ID 的多个 DIV。

上面的代码在我设置警报时返回了 ID，但没有淡出 DIV 或我尝试的任何其他内容......这里的任何帮助将不胜感激。HTML 是：

<div id="First-Block" class="item">                 
    <p>text here</p>
    <p><a href="#" class="hideinfo">Back</a></p>    
</div>

谢谢！

Answer 1

你应该fadeOut("slow")改用。

尝试将您的代码更改为：

$(".hideinfo").click(function () {
    var parentLink = $(this).parent().parent();
    $(parentLink).fadeOut("slow");
});

为了进一步改善这一点，您可以将代码缩短为：

$(".hideinfo").click(function() {
    $(this).closest(".item").fadeOut("slow");
});

顺便提一下，通过单击锚点，它将使用 . 跳转到页面顶部#。我会看看.preventDefault()

你也可以在这里查看 API -> http://api.jquery.com/fadeOut/

Answer 2

jsBin 演示

$(".hideinfo").click(function( e ){
    e.preventDefault();           // prevent default anchor link behavior
    $(this).closest('.item').fadeTo(400, 0);
});

另外尝试将上述内容包装成document ready：

$(function(){
   // code here.
});

Answer 3

使用fadeOut()代替，因为您的主要目标是影响整体可见性而不是给定的不透明度。