3

私は最近 jquery を学び始め、練習用に小さなプラグインを書くことにしました。
jsfiddle のリンクは次のとおりです: http://jsfiddle.net/ndanvery/hy4cY/35/

今、私は2つの質問があります:

  1. クリックするとスパンが消えて再び表示されるのはなぜですか?
  2. スパンがアクティブなときに背景に「ぼやけた」ものを追加したかった: http://jsfiddle.net/ndanvery/hy4cY/34/
    しかし、スパンを透明にしたくない! ラッパーを選択しましたが、ステートメントで .big クラスを省略しましたか?
    $('#wrapper:not(.big)').addClass("not_focused");

とにかく、私を助けてくれてありがとう:)

編集:
申し訳ありませんが、私の問題があまり明確ではなかったことを認めなければなりません。最初の質問で私が探していたのは、クリックしたときに実際にスパンを表示したままにし、消えないようにする方法でした!
再度、誤解を招き申し訳ありません...

4

3 に答える 3

1

1)マウスアップのe.focusが機能していない(私にとってはnullです)ので、divをフェードアウトするifステートメントに常に入っています。次に、イベントのキャプチャ/バブリングにより、スパンクリックハンドラーが次に起動し、フェードインします。直接 (e.target を使用して) クリックした要素が .big スパンではなかったかどうかを確認することをお勧めします。 :

$(document).mouseup(function (e) {
    if(!$(e.target).hasClass(".big")) {
        $(".big").fadeOut("slow");
        $('#wrapper').removeClass("not_focused");
    }
});

2)セレクター $('#wrapper:not(.big)') は、「大きなクラスを持たないラッパーのIDを持つ要素を見つけてください」と言いますが、これはあなたが望むものではありません。ラッパー。その中のすべてをフェードアウトするラッパーをフェードアウトしています。

クリックした子以外の子をフェード アウトすることもできます。

$("[id^=span]").click(function () {
    $("[id^=span]").not(this).addClass("not_focused");
    $(this).find('.big').fadeIn("fast");
    $('#wrapper:not(.big)').addClass("not_focused");
    $(this).dequeue();
});

または、ラッパーをフェードアウトして .big スパンをコピーし、それをドキュメントのラッパーの後に追加して、上に配置することもできます。

于 2013-04-19T09:53:48.567 に答える
0

最初の質問への答え:イベントの伝播

2 番目の質問に対する答えは、ラッパーの不透明度を設定し、それがすべての子の不透明度に影響を与えるということです。ラッパーのコンテンツの一部だけを別の不透明度にしたい場合は、それらの要素を選択して、それらの不透明度を指定する必要があります。

于 2013-04-19T09:35:46.457 に答える