web-dev-qa-db-ja.com

jquery変更クラス名

私はtdタグのidを与えられたtdタグのクラスを変更したいです。

<td id="td_id" class="change_me"> ...

他のdomオブジェクトのclickイベント内でこれを実行できるようにしたいです。どのように私はTDのIDをつかみ、そのクラスを変更するのですか？

jquerycss
313
aeq

次のように .attr() を使用すると、 set クラス（ が であったものに関係なく）に設定できます。

$("#td_id").attr('class', 'newClass');

add クラスにしたい場合は、代わりに .addclass() を使用してください。

$("#td_id").addClass('newClass');

または .toggleClass() を使用してクラスを交換する簡単な方法：

$("#td_id").toggleClass('change_me newClass');

これはclass属性に特化したjQueryメソッドの完全なリストです 。

664
Nick Craver

私はあなたがこれを探していると思います：

$('#td_id').removeClass('change_me').addClass('new_class');
86
Fosco

彼はクラス名を置き換えたいと思います。

このような何かがうまくいくでしょう：

$(document).ready(function(){
    $('.blue').removeClass('blue').addClass('green');
});

http://monstertut.com/2012/06/use-jquery-to-change-css-class/ から

30
jack

あなたはこれを行うことができます：$("#td_id").removeClass('Old_class'); $("#td_id").addClass('New_class');またはあなたがこれを行うことができます

$("#td_id").removeClass('Old_class').addClass('New_class');
9
Alireza Masali

それで、あなたはそれがクリックされたときにそれを変えたいです...私が全体のプロセスを通過させてください。あなたの "External DOM Object"がselectのような入力であると仮定しましょう：

このHTMLから始めましょう：

<body>
  <div>
    <select id="test">
      <option>Bob</option>
      <option>Sam</option>
      <option>Sue</option>
      <option>Jen</option>
    </select>
  </div>

  <table id="theTable">
    <tr><td id="cellToChange">Bob</td><td>Sam</td></tr>
    <tr><td>Sue</td><td>Jen</td></tr>
  </table>
</body>

非常に基本的なCSS：

​#theTable td {
    border:1px solid #555;
}
.activeCell {
    background-color:#F00;
}

そしてjQueryイベントを設定します。

function highlightCell(useVal){
  $("#theTable td").removeClass("activeCell")
      .filter(":contains('"+useVal+"')").addClass("activeCell");
}

$(document).ready(function(){
    $("#test").change(function(e){highlightCell($(this).val())});
});

今、あなたが選択から何かを選ぶときはいつでも、それはあなたが全体のidベースのプロセスを破壊することを可能にする、一致するテキストを持つセルを自動的に見つけるでしょう。もちろん、そのようにしたい場合は、次のようにして、値ではなくIDを使用するようにスクリプトを簡単に変更できます。

.filter("#"+useVal)

そしてIDを適切に追加するようにしてください。お役に立てれば！

6
Trafalmadorian

addClass または toggleClass をチェックアウトできます。

6
Karl Johan

編集：

それをネスト要素から変更していると言っているのであれば、IDはまったく必要ありません。代わりにこれを行うことができます。

$(this).closest('td').toggleClass('change_me some_other_class');
    //or
$(this).parents('td:first').toggleClass('change_me some_other_class');

元の答え： 

$('#td_id').removeClass('change_me').addClass('some_other_class');

他の選択肢は：

$('#td_id').toggleClass('change_me some_other_class');
4
user113716
$('.btn').click(function() {
    $('#td_id').removeClass();
    $('#td_id').addClass('newClass');
});

or

$('.btn').click(function() {
    $('#td_id').removeClass().addClass('newClass');
});
2
Prabhu

この方法は私にはうまくいきます

$('#td_id').attr('class','new class');
1
Puterafx Fx

すでにクラスを持っていて、クラスを追加するのではなく、クラスを切り替える必要がある場合は、イベントを切り替えて連鎖させることができます。

$('li.multi').click(function(e) {
    $(this).toggleClass('opened').toggleClass('multi-opened');
});
1
lentyai

jqueryを使用してクラスを変更する

これを試してください

$('#selector_id').attr('class','new class');

このクエリを使用して任意の属性を設定することもできます

$('#selector_id').attr('Attribute Name','Attribute Value');
0
Love Kumar

私はclassNameを変更するために.propを使用した方がいいですし、それは完璧に動作しました：

$(#td_id).prop('className','newClass');

このコード行では、次の例で、newClassの名前、およびもちろん要素のIDを変更するだけで済みます。idelementinyourpage

$(#idelementinyourpage).prop('className','newClass');

ちなみに、どのスタイルがどの要素に適用されているかを検索したい場合は、ページが表示されているときにブラウザのF12をクリックしてから、DOM Explorerのタブで見たい要素を選択します。スタイルでは、どのスタイルがあなたの要素に適用されているか、そしてどのクラスからその読みが見られるかを見ることができます。

0
Alexis Gassan