0

divをクリックして、クラス「オレンジ」に追加された追加の設定を切り替えようとしています。問題なくクラスが追加されますが、もう一度クリックしても削除できません。

$("div.hidden").click(function(){
   $(this).addClass("orange");
});

$("div.orange").click(function(){
   $(this).removeClass("orange");
});


<div class="hidden"></div>

.hidden{
    width:100px;
    height:100px;
    float:left;
    background-color:#ccc;
    margin-bottom:5px;
    margin-right:5px;
}

.orange {background-color:#F90;}

div ボックスをクリックすると、class="hidden orange" に変わります

このため、私も試しました

$("div.hidden orange").click(function(){
   $(this).removeClass("orange");
});

そもそも「みかん」から「隠れたみかん」をはぎ取ってそのままにしておくのですが、うまくいきませんでした。

既存のクラスの後にクラスを切り替える適切な方法は何ですか?

4

3 に答える 3

3 
$("div").click(function(){
   $(this).toggleClass("orange");
});
于 2013-03-23T13:05:09.170 に答える
1

クラスがあるかどうかを確認してorange切り替える必要があります。

var $div = $('div.hidden');
if ($('div.hidden').hasClass('orange')) {
    $div.removeClass('orange');
}
else $div.addClass('orange');

div を$div変数に割り当てるので、常に検索しているわけではありません。

クラスがあるかどうかに応じて他の.toggleClass()スクリプトを実行したくない場合は、Shuping が提案するも良い解決策です。divorange

addClass(): http://api.jquery.com/addClass/
hasClass() : http://api.jquery.com/hasClass/
removeClass() : http://api.jquery.com/removeClass/

于 2013-03-23T13:04:59.687 に答える
0

そのクラスを削除するイベントハンドラーが機能しない理由は、それが要素に適用されていないためです。イベントをバインドする時点では、クラスorangeに要素がないため、イベントハンドラーはどの要素にもバインドされません。

デリゲートを使用して、要素でそのイベントがまだ存在していなくても処理できるようにすることもできますが、それでも最初のイベントが常にトリガーされないようにする必要があります。つまり、別のようなものを導入する必要があります。要素の状態を追跡するためだけにクラス。

単一のイベントハンドラーで実行する場合は、クラス自体を使用して状態を追跡できます。

$("div.hidden").click(function(){
  if ($(this).hasClass("orange")) {
    $(this).removeClass("orange");
  } else {
    $(this).addClass("orange");
  }
});

toggleClassまたは、同じことを行う方法を使用できます。

$("div.hidden").click(function(){
  $(this).toggleClass("orange");
});

div.hidden orangeセレクターが何もしなかった理由は<orange>、2つのクラスを持つdivではなく、div内のタグと一致するためです。これに一致させるには、セレクターを使用しますが、クラスが後で追加さdiv.hidden.orangeれるため、イベントがバインドされたときにどの要素とも一致しません。orange

于 2013-03-23T13:17:53.790 に答える