2

默认情况下，我隐藏了几个 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 上。

4

2 回答 2

5

页面上的两个元素不能有相同的 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);
    });
});

希望这会有所帮助。

于 2013-09-22T22:55:39.710 回答
0

应该是这样的：

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

});
于 2013-09-23T01:27:35.120 回答