Javascript fadeOut（）仅淡出第一个元素

默认情况下，我隐藏了几个div，当用户单击某个按钮时，我会淡入其中。这很好，但当我尝试使用said.holder DIV中的span关闭.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>

我到底做错了什么？如果有什么不同的话，我将使用jquery1.10.2

---

我想在JSFIDLE上演示代码，但它似乎已关闭。

页面上两个元素的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>

---

希望这会有所帮助。

以下是它应该是什么样子：

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

---

ID应该是唯一的，使用类你可以为一个对象拥有多个类，只需用空格分隔它们，即class=“class1 class2”这个对象可以是addreses as.class1或.class2…所以使用类而不是唯一的ID…然后不要忘了它会给你数组，所以运行数组并为每个元素创建它>|@M.Svrcek Oops，忘了吧，谢谢！非常好，谢谢！忘记了多个班级的事情：P

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

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

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

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

                  $(this).fadeOut(250);

                      });

         e.preventDefault();
    });

});