javascript - fadeOut() 只淡出第一个元素

Question

默认情况下，我隐藏了几个 DIV，然后当用户单击某个按钮时我将它们淡入。这很好用，但是当我尝试使用所述 .holder DIV 中的跨度关闭 .holder DIV 时，只有第一个有效。当我点击其他人时，没有任何反应。我没有收到任何错误或任何形式的视觉反馈。

标记:

<div class="holder" id="window_one">
    <div class="title_bar">
        <p>Window 1</p>
        <div class="control_holder">
            <span class="controls" id="close">X</span>
            <span class="controls" id="minimize">_</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>
<div class="calculator" id="window_two">
    <div class="title_bar">
        <p>Window 2</p>
        <div class="control_holder">
            <span class="controls" id="close">X</span>
            <span class="controls" id="minimize">_</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>

jQuery:

$(document).ready(function() {
    $('#close').click(function() {
        $(this).parents('.holder').fadeOut(250);
    });
});

我到底做错了什么？如果有任何不同，我正在使用 jQuery 1.10.2。

我会在 jsFiddle 上演示代码，但它似乎已关闭 atm。

Answer 1

页面上的两个元素不能有相同的id。如果你想这样做，把它作为一个类名，比如 -

<div class="holder" id="window_one">
    <div class="title_bar">
        <p>Window 1</p>
        <div class="control_holder">
            <span class="controls close">X</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>
<div class="calculator" id="window_two">
    <div class="title_bar">
        <p>Window 2</p>
        <div class="control_holder">
            <span class="controls close">X</span>
        </div>
    </div>
    <div class="interface">
        <p>Testing123</p>
    </div>
</div>

和 Jquery 一样 -

$(document).ready(function() {
    $('.close').click(function() {
        $(this).parents('.holder').fadeOut(250);
    });
});

希望这会有所帮助。