javascript - 有没有办法从 Javascript 中的 <a> 链接访问包含的 div？

Question

我想做的是单击 div 内的图像链接，然后让包含我的图像链接的 div 消失 (display:none;)。现在我的 html 具有以下结构

<div id="one">
    <div>
        Words Words Words
        <a href="javascript:void(0);" onClick="hideDiv('#one')";>
            <img src="foo.jpg" />
        </a>
    </div>
</div>
<div id="two">
    <div>
        Words Words Words
        <a href="javascript:void(0);" onClick="hideDiv('#two')";>
            <img src="foo.jpg" />
        </a>
    </div>
</div>

hideDiv() 函数如下所示:

function hideDiv(divId) {
    $(divId).hide();
}

这很好用，但可能有点麻烦。我希望不需要通过 id 显式定义我想要隐藏的 div，并且让 Javascript 捕获链接单击事件并执行类似 $(this_link.parent_div.parent.div) 的操作。隐藏()；。不幸的是，我不知道该怎么做，但我相信一定有办法!

Answer 1

与其使用一个 id 来包含 div，不如使用一个公共(public)类，然后使用它。

HTML

<div class="container">
    <div>
        Words Words Words
        <a href="javascript:void(0);">
            <img src="foo.jpg" />
        </a>
    </div>
</div>

Js

$('a').click(function(){
      $(this).closest('.container').hide();
});

如果您不想添加任何类，那么您可以简单地尝试一下。

$('a').click(function(){
      $(this).parent().parent().hide();
});

工作演示 - http://jsfiddle.net/ShankarSangoli/MvkEa/

引用资料:

• .closest() - http://api.jquery.com/closest/
• .parent() - http://api.jquery.com/parent/