javascript - Javascript付箋

Question

趣味でjavascriptで付箋を作ってみました。

画面に付箋が複数ある場合に、選択したものを前面に出したい。すなわち。z-index を上げて、他の付箋よりも高くします。現在、私は :hover を使用して CSS でこれを行っていますが、これはちょっと面倒です。javascript/jqueryでやりたいです。focus() と blur() で addClass/removeClass を実行しようとしました

これは私がこれまでに持っているものです

$('.darkYellow').click(function() {
    $(this).focus(function() {
        $(this).addClass("index");
    });
});

$('.darkYellow').blur(function() {
    $(this).removeClass("index");
});

Christoph http://jsfiddle.net/EnigmaMaster/aQMhk/6/のおかげで 更新され、機能しています

score 8 · Accepted Answer

クラスセレクターは.文字で始まりますが、クラス名はそうではありません (そうすることができますが、それは狂気です)。

$(this).addClass("index")

score 2 · Accepted Answer

addClass の場合、「.」を含める必要はありません。

単に

$(this).addClass("index");

http://api.jquery.com/addClass/

score 1 · Accepted Answer

現時点ではわかりませんが、なぜ機能しないのですか.on()(これが推奨される方法です!)、次のコードは機能するはずです:

$('.darkYellow').live("click", function() {
        $(".index").removeClass("index");
        $(this).addClass("index");
});

必要なのはこれだけです。

クリック時のライブイベントハンドラー ( on() の使用を推奨)
インデックスノートを探してクラスを削除する
クラスを現在「クリックされた」要素に追加する

デモ

score 1 · Accepted Answer

$('.darkYellow').click()付箋が実際に存在する前に呼び出しています。.click()呼び出し時にセレクターに一致する各要素にイベントを追加します。あなたが望むのは.live()、現在と未来のすべての要素を処理するようなものです。

$('.darkYellow').live('click', function() {
    $(this).focus(function() {
        $(this).addClass("index");
    });
});

アップデート

試す：

$('.darkYellow').live('click', function() {
  $(this).addClass("index");
});

$('.darkYellow').live('blur', function() {
  $(this).removeClass("index");
});

他の誰かが指摘したように、 .focus() への呼び出しは不要です。

javascript - Javascript付箋

5 に答える 5

Related

Reference