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);
    });
});

希望这会有所帮助。

Answer 2

应该是这样的：

<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>

和JavaScript：

$(document).ready(function() {
    $('.close').click(function(e) {

        $(this).parents('.holder').forEach(function(){

                  $(this).fadeOut(250);

                      });

         e.preventDefault();
    });

});