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

ページ上の 2 つの要素の同じ 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 に答える