Question

我已经找到了其他方法来做到这一点，但只找到答案，反之亦然（点击父母的时候让孩子褪色） - 基本上，我有一些目标可以通过点击链接。我想要的是当你点击“接受”链接时盒子会淡出 - 我稍后会添加一个AJAX调用，以便将这种接受存储在数据库中。

此时我的jQuery代码仅在点击时淡出链接本身。我不确定现在要做什么，以便在点击链接时整个框消失。谢谢！

boxes.php

<div id='goal'>
    <div class='setby'>Set on 2013-12-31 16:02:35 by me</div>
    <div class='goal'>Climb Mount Kilimanjaro.</div>
    <div class='completeby'>
       Complete by 0000-00-00 00:00:00 - 
       <a id='accept' href='#'>Accept?</a>
    </div>
</div>

的script.js

$(document).ready(function() {
    $('a#accept').click(function() {
        $(this).fadeOut('slow');
        });
    });

Answer 1

您希望使用closest函数查找父目标div并将其淡出：

$('a#accept').click(function() {
    $(this).closest('#goal').fadeOut('slow');        
});

通过使用closest，它将通过父元素进行备份，直到找到所需元素。这很有用，因为你的HTML可以改变，但只要它仍然具有相同的包含jQuery代码将起作用。

另外，正如杰伊所提到的，使用ID来识别父母（以及接受链接）并不是一个好主意，因为ID在文档中应该是唯一的。相反，可以将两个类用于：

<div class='goal-parent'>
    <div class='setby'>Set on 2013-12-31 16:02:35 by me</div>
    <div class='goal'>Climb Mount Kilimanjaro.</div>
    <div class='completeby'>
       Complete by 0000-00-00 00:00:00 - 
       <a class='accept' href='#'>Accept?</a>
    </div>
</div>

脚本将更改为：

$('a.accept').click(function() {
    $(this).closest('.goal-parent').fadeOut('slow');       
});

工作示例 - http://jsfiddle.net/URLT8/

Answer 2

只需寻找父母 -

$(document).ready(function() {
    $('a#accept').click(function() {
        $(this).closest('div').fadeOut('slow');
        });
    });

但是你不应该在页面中使用重复的ID，我担心你可能会有一些（＆＃39;接受＆＃39;，＆＃39;目标＆＃39;等等）

Answer 3

就像你在标题中所说的那样。定位链接的parent。

$(document).ready(function() {
    $('a#accept').click(function() {
        $(this).parent().fadeOut('slow');
    });
});

Answer 4

使用：

$(this).parent().fadeOut("slow");

Answer 5

使用此：

$(this).parent().parent().fadeOut("slow");

单击子链接时淡化父div

5 个答案: