0

いくつかの画像といくつかの選択ボックスを含むテーブルがあります。選択ボックスと画像を除いて、ユーザーがその行をクリックするたびに行を強調表示したい(tdを意味します)

今、私はこれを使用しています、

$("selector").live("click",function() {
    $(this)
        .parents("tr:first")
        .toggleClass("diffColor")
    ;
});

しかし、選択ボックスまたは画像をクリックするとクラスが適用されますが、選択ボックスまたはその他の画像をクリックする必要はありません。

ここを参照

前もって感謝します...

4

6 に答える 6

3

これを試して：

$(".selector").on("click", function (e) {
    if (e.target === this) $(this).parent("tr:first").toggleClass("diffColor");
});

.selectorそれがすべてのクラス名であるという事実を仮定すると、td

ここでthisは、現在のスコープ内の要素を意味し、常にtdここをクリックします。

andは、e.target実際にクリックされた要素を意味します。tdcheckboxtd

そのため、実際にクリックされた要素がtd現在のスコープにない場合は、 e.target === thisfalse を返し、何も起こらない (クリック イベントは発生しません) か、その逆です。

于 2013-04-16T12:18:49.087 に答える
2

またはを含むtoggleClassをクリックしたくない場合は、次の操作を実行できます。td<img><select>

$('selector').live('click', function() {
    if (!$(this).has('select, img').length) {
      $(this).parents('tr:first').toggleClass('diffColor');
    }
});

これが更新されたフィドルです

于 2013-04-16T12:20:38.577 に答える
2

TDに画像または選択ボックスが含まれているかどうかを確認する解決策があります。

$("#tableId td").on("click",function() {  
     var ths=$(this);    
     if((ths.has("select").length ? false : true)&&(ths.has("img").length ? false : true)){
         $(this).parent().toggleClass("diffColor");
     }
    });

JSFIDDLE

于 2013-04-16T12:46:43.780 に答える
1

これを試して....

$("td").live("click",function() {
$(this)
    .parents("tr:first")
    .toggleClass("diffColor")
;
});

デモ

于 2013-04-16T12:16:37.827 に答える
0

これは、イベントがバブリングしているために発生します。

これを防ぐために、子のクリックイベントに event.stopPropagation を追加できます。

そのため、すべての入力要素と選択要素に次を追加して、伝播を防ぎます。クリックのイベント ハンドラーが既にある場合は、関数の先頭に stopPropagation を追加します。

$("#tableId").find("input, select")
             .click(function(e){e.stopPropagation();});
于 2013-04-16T12:37:34.793 に答える