0

フィドルが正しく機能しないのはなぜですか

HTML

<div>
    <div>
        <div class="class-fake fake-class">Some other data</div>
        <div> Some data</div>
    </div>
    <span>
        Span data
    </span>
</div>

JS

$(document).ready(function () {
    $("*").not(".class-fake").css("color", "red");
    //Div with class-fake should not turn to red
});

http://jsfiddle.net/ZSL9H/

$（ "*"）を$（ "div"）に置き換えましたが、結果は同じです。

編集 ：

私がやろうとしていること：基本的には、本体にイベントを追加して、一致する要素以外の要素$('.class-fake')がクリックされた場合に関数が実行されるようにします。したがって、すべての要素にイベントがアタッチされないように、イベント委任を使用しています。

$("*").on("click", ":not(.class-fake)", function(){
 //execute
});

また、.class-fake要素には個別のclickイベントが追加されています。

上記も機能していません。.class-fake要素をクリックしてもイベントが発生します。だから私は使っ$("*").not('.class-fake')て.not()いるのですが:not()

4

4 に答える 4

2

divコードは、クラスでスタイルを設定しませんclass-fake。

htmlこれは、要素と要素を含む要素のすべての親にスタイルを設定し、親要素から色を継承するため、bodyその中のテキストも赤にします。div

スタイルのように、いくつかのスタイルは継承されますcolor。継承されていない別のスタイルを使用しborderて、スタイルが実際に要素に設定されていないことを確認できます。

http://jsfiddle.net/ZSL9H/3/

編集：

イベントがバブルして親要素に発生するため、デリゲートからイベントを除外してイベントの発生を防ぐことはできません。

すべての要素でイベントをキャッチし、stopPropagationそれがバブリングしないようにするために使用し、クリックされた要素が除外する要素でない場合にのみコードを実行します。

$("body").on("click", "*", function(e) {
  e.stopPropagation();
  if (!$(e.currentTarget).is('.class-fake')) {
    // execute
  }
});

デモ： http： //jsfiddle.net/rNqw8/1/

于 2013-02-18T16:11:16.820 に答える
2

は親要素not()を除外していないためです。divあなたが何をしようとしているのか具体的に言っていないので、より良い方法であなたを導くのは難しいです。

簡単な修正は次のとおりですが、これはDOM構造に大きく依存します。

$("div > div > div").not(".class-fake").css("color", "red");
于 2013-02-18T16:04:12.783 に答える
2

Rory McCrossanが言うように、あなたはそのcssルールを.class-fakeに適用したくないと言っているだけですが、それをその親などに適用して、.class_fakeにそのルールを継承させます。

あなたはこれを行うことができます：

$(".class-fake").css("color", "black");

編集：

それは私には伝播のようです。このhttp://api.jquery.com/event.stopPropagation/を使用してください

$(".class-fake").click(function(event){
  event.stopPropagation();
});
于 2013-02-18T16:07:25.620 に答える
2

Jqueryはこれをもたらします：

   <div style="color: red">
         <div style="color: red">
             <div class="class-fake fake-class">Some other data</div>
             <div style="color: red"> Some data</div>
          </div>
          <span style="color: red">
              Span data
           </span>
    </div>

ご覧のとおり...親は「色：赤」です...子供も赤です...

于 2013-02-18T16:09:37.913 に答える