1

何もしないのに、それ自体とは別に同じクラスの要素をクリックするとアクティブになるJquery forループがあります。

ループは次のとおりです。

$('.container').click(function(){
    for(i = 1; i != 20; i++) {
        $('.container' + i + ' h1 a').click(function(){
            $('.container:not(.container' + i +')').hide();
        });
    }
});

HTML:

<div class='container container1'>
    <div class='content'>
        <h1><a href='#'>Title</a></h1>
        <p>Content</p>
    </div>
</div>
<div class='container container2'>
    <div class='content'>
                <h1><a href='#'>Title</a></h1>
        <p>Content</p>
    </div>
</div>
<div class='container container3'>
    <div class='content'>
                <h1><a href='#'>Title</a></h1>
        <p>Content</p>
    </div>
</div>

調べてみたところ、for ループ内で関数を実行できないことが問題であることがわかりました。

私は膨大なコードでそれを行うことができることを知っていますが、より多くのコンテナが追加されると、この方法で行う方が簡単になると思います.

前もって感謝します

4

3 に答える 3

5

クリックしたもの以外を非表示にしたい

あなたが望むのは次のようなものだと思います：

var $container = $('.container').click(function(){
    $container.not(this).hide();
});

デモ

コンテナをクリックすると、他のすべてのコンテナが非表示になります。の詳細については、jQuery API ドキュメントを参照してください.not。

既存のコードにはいくつかの問題があります。

  • ループ内に関数を作成しています。JavaScript でのクロージャーの実装方法が原因で、関数内の loo 変数にアクセスしようとすると (実際に行った場合)、予期しない動作が発生する可能性があります。ループ内の JavaScript クロージャーを参照してください– 簡単な実用例

  • .containerそれらのいずれかをクリックするたびに、新しいクリックイベントハンドラーを他のすべての要素にバインドしています。つまり、3 つの要素をクリックすると、すべてのコンテナーに 3 つの追加のイベント ハンドラーがアタッチされ、それぞれが同じことを行います。

于 2013-07-12T21:34:42.517 に答える
1

あなたはこの方法を複雑にしすぎています。

コンテナをクリックしたときに他のすべてのコンテナを非表示にする場合は、次のようにします。

$(function () {
    $('.container').click(function () {
        $('.container').not(this).hide();
   });
});

これが実際の例のフィドルです...

<p>タグがクリックされなければならないようにしたい場合は、次のようにすることができます。

$(function () {
    $('p').click(function () {
        $('.container').not($(this).parents()).hide();
    });
});

別のフィドル

于 2013-07-12T22:01:09.837 に答える