javascript - Parents 方法不适用于关闭两页

Question

我有两个页面，它们都有一个用作关闭按钮的图像。这是 HTML 代码:

<div id="bioPage">
    <img id="closeBtn" src="Images/CloseButton.png" alt="Close Button" />
</div>
<div id="skillsPage">
    <img id="closeBtn" src="Images/CloseButton.png" alt="Close Button" />
</div>

& 我只想编写一次代码，以便在单击其中的关闭按钮时关闭页面。所以我写了这个:

$('#closeBtn').click(function() {
    var parentDiv = $(this).parents('div:first');
    parentDiv.css('left', '-100%');
    $('nav').animate({
        'left': '0px'
    }, 500);        
});

但它适用于第一页和第二页，当单击关闭按钮时不会关闭。

Answer 1

这是预期的行为。 HTML 中的标识符必须是唯一的。您可以对元素使用通用类，然后轻松使用 Class Selector (“.class”)

HTML

<img class="closeBtn" src="Images/CloseButton.png" alt="Close Button" />

脚本

$('.closeBtn').click(function() {
});