1

jQueryでクラスを削除するにはどうすればよいですか?

私が取り組んでいるこの「テンプレート」があり、ユーザーがナビゲーションの「配色」を変更できる「設定」ボックスが左側に必要です。

私は5〜10色ほど持っていますが、うまくいきません。

$(".color-orange").click(function () {
  $("#nav").addClass("color-orange");
});

誰かが緑をクリックした場合、「color-orange」クラスを削除して新しいクラスを追加するにはどうすればよいですか?

うーんこれ使った..

$(".color-green").click(function () {
      $("#nav").removeClass("color-orange");
      $("#nav").addClass("green");
    });

しかし、それはオレンジを奪うだけです。別の色をクリックすると機能しません.. 私の英語で申し訳ありませんが、はい。ここに来るのは初めてです:)

敬具 / アルビン

4

5 に答える 5

7

これを試して：

$("#nav").removeClass().addClass("green");

引数がない場合、 removeClassはすべてのクラスを削除します。

また、何度も再選択しないでください$("#nav")。メソッドチェーンを使用してください。これにより、パフォーマンスが向上します。

于 2013-02-05T10:47:36.373 に答える
6

以下のコードは、既存のクラスを設定したもの（この場合は「緑」）に上書きするだけです。

$("#nav").attr("class", "green");

これは十分な賛成を得ているので、なぜこれが上記のものよりも良い答えであるのかを説明します。が付いているものremoveClass()。

まず、必要な要素、つまりを取得します$("#nav")。

次に、JQueryのプロパティを呼び出しますremoveClass()。

次に、JQueryの別のプロパティを再度呼び出しますaddClass()。

私が提案した解決策では：

まず、要素を取得してから、プロパティを呼び出します。これで完了attr()です。

だから、それは一歩少ないです。

于 2013-02-05T10:49:21.640 に答える
3

これはどう

$('[class^="color-"]').each(function() {
  $("#nav").removeClass().addClass($(this).attr("class"));
}

またはxFortyFourxが指摘したように：

$('[class^="color-"]').each(function() {
  $("#nav").attr("class",$(this).attr("class"));
}

代替 - 私があなたが持っていると仮定した場合

.green { color:green; .... } /* for the nav */
.color-green { color:green; .... } /* for the settings */

できるよ

$('[class^="color-"]').each(function() {
  $("#nav").attr("class",$(this).attr("class").replace("color-",""));
}
于 2013-02-05T10:51:42.410 に答える
2

クラスを使用removeClassして渡さないremoveClassと、要素が持つすべてのクラスが削除されます。

$(".color-green").click(function () {
  $("#nav").removeClass().addClass("green");
});
于 2013-02-05T10:48:47.777 に答える
1 
$(".color-green").click(function () {
      $("#nav").removeClass("color-orange");
      $("#nav").removeClass("next-color");
      $("#nav").removeClass("another-color");
      $("#nav").removeClass("yet-another-color-but-green");
      $("#nav").addClass("green");
});
于 2013-02-05T10:48:35.600 に答える