>>193それは見てますよ
それのどこが一つのclassになのでしょうか？

>>199
それ俺が書いたんだけど？

質問者が面倒だって言ってるから、
俺がclassに複数の異なった属性を入れるのがいけないと指摘した
異なった属性を混ぜ込まなければclassにそんなに多くのものを入れることはない
「一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる」
最初から質問者に対してそう指摘している

で、おまえは誰？何をやった？

>>201
> それのどこが一つのclassになのでしょうか？

一つの要素にclass属性は"一つ"しかありませんよｗ
data-*属性はいくつでも作れますがね

>>203
>>194に”複数の異なった属性を一つのclassに入れてしまう”と？

ついでに質問いいすか？
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか？
リセットするときどうするのでしょうか？
もし各data-*ごとに消すならaddＣｌａｓｓとさほど変わらない気がしますが

ここで誰？ってｗ
名前まで入れてるのにな

それもだが上に出てたライブラリで勝手に～はどうするんだろうな
むろんdata-*を否定するわけではないが

>>188
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。
>>188でどう解決するのか。
同じく聞きたい。

>>204
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか？
そう。attrメソッドで変える。

そもそもdata-*は別にjQueryのdataメソッドのための属性というわけじゃない
jQueryのdataメソッドが先に作られ、HTML5の仕様としてdata-*が作られた
dataメソッドの初期値としてうまく整合性が取れそうだから統合されたが、
もともと関係ないもので、data-*を属性として使うなら、attrメソッドを使う

> もし各data-*ごとに消すならaddＣｌａｓｓとさほど変わらない気がしますが

値をグループ化できる。複数の値を週類ごとにまとめたものがグループ
classの場合は値を書くしかないから3つのグループがあって、一つのグループごとに
5個の値があれば、最大15個の値を管理する必要が出てくる
data-*を使えば3つでいい（今は数が多くて管理が大変という話だというのを思い出そう）
グループと値として管理できるのがメリット

また値として排他であってもclassだと値の組み合わせが作れてしまう（例えば、class="black white red yellow"）
もちろんこの場合の動きとしては未定義でいいんだが、data-color="black" とかいう使い方なら
他の値が同時に設定されていることを考えなくて済む

>>206
> それもだが上に出てたライブラリで勝手に～はどうするんだろうな
ライブラリが勝手につけたものは無視すればいい。classという一つの属性を共用して
使っているわけじゃないので、自分以外のことは考えなくて良い

もちろんライブラリでもdata-*を使っていて名前がが被る可能性があるが、
それはclassの値でも一緒の話だし名前の付け方を工夫すればよい

>>207
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。

値は増えるが、グループが増えることは少ない

それに加え

グループが増えたとしても、既存のコードには影響が出ない

classをつかっていると、既存のコードが参照しているclassに
自分の知らない値が入ったぞ！ということになり
それに対応するのが大変という話だが

data-*だと、既存のコードが参照してないグループ（data-*属性）が
追加されただけなので、既存のコードとは無関係となる

もうちょっと具体的に話をする

classに全部ぶち込むと、スペース区切りで複数の値を入れることになる。
data-*であればそんなことをしなくて単体の値を指定できる。
っていうことは、

let resetValue = {
　"data-color": "white",
　"data-size": "M",
}

みたいに初期値を書けるってことだよ
これがクラスだと

let resetValue = {
　"white": true,
　"black": false,
　"red": false,
　"blue": false,
　"m": true,
　"l": false,
　"s": false,
　"ll": false,
　// それ以外の知らない値はそのまま変更しない（消してはいけない）
}

としなければいけなくなるということ
そして、色やサイズのパターンが増えたらどうすんの？ということ

ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねｗ
whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなｗ

ちなみに初期値に設定するのは
$("#id").attr(resetValue)
だけでいいで？ attrはハッシュ値を受け付けるからよ

>>208
グループも何も静的1個（または2個）で済む方法がある>>140
>>142のことはスッキリしない人がいるかもしれんだろうが>>141ならそれでいいんじゃね

>>141の「ええよ」は、その一つ前のレスの質問者（>>140）へのレスであって
>>142の問題があるけどどうする？に対する「ええよ」じゃないぞ？（時系列注意）

というか、 ＞＞142で
> それだと静的に付けたclassまで消えちゃうじゃん
という指摘にたいして

> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと

って悩んだ挙句の妥協案じゃんｗ

それからもっといい案（data-*）が出てるわけでしょ
ほんと時系列注意なｗ

んなこたわかってる
そもそも>>140だって元々>>142の問題を承知で書いてる
だからわざわざaaaを付け直してるんだろ

だがdata-*を使ったもっといいやり方には
気づいていなかった

>>208
おおまかわかりました、が
>他の値が同時に設定されていることを考えなくて済む
はclassでも同じことではないでしょうか？重複する変な付け方してなければ

.aaa {color:}
.bbb {size:}

とした場合>>210の
>としなければいけなくなる
の関連がよくわかりません

もっといいやり方かどうかは質問者が決めること

>>217
classだとね、<span class="t-sharts red m">
となっている時に、例えばラジオボタンの変更に従って
Tシャツの色とサイズを変更したいって時に
addClass("blue l") だけじゃだめでしょ？
他の値（red m)が残ってしまうでしょ？という話だよ

もちろんこれはバグなんだが、そもそもこうなってしまうのは
classがスペース区切りで複数のクラスを入れるものであるというHTMLの仕様によるもの
data-*だとその縛りがないので単一の値を入れるものとこっちで勝手に仕様を決められる

<span class="t-sharts" data-color="red" data-size="m">
とあるとき、attr({"data-color": "blue", "data-size", "l"}) とするだけでいい


classでやろうとすると >>210みたいな色のリストを持たなければいけない
その他の色やサイズのリストとその初期値をすべて持って置かないといけない

>>218
質問者 = 初心者 と仮定すると（この仮定は概ね正しい）
初心者がいいやり方を決められる訳がない

いいやり方は上級者が決める
だがいいやり方は、簡単なやり方とは限らない
いいやり方をするには技術が必要な場合があるからだ
（スポーツとかに置き換えればわかるだろう）

いいやり方をやるための技術力が初心者にはなく
いいやり方を選択できないことも有る。
だがこれは、やり方が良いか悪いかの話ではない

初心者が決めたのは良いか悪いかではなく、
いいやり方を自分がやるかどうかを決めただけ

>>140の質問を要約すると、

・動的に追加されたclassの削除再追加を一括で行いたいが、
　$('.aaa').removeClass().addClass('aaa');　とするやり方は間違っていないでしょうか?

この質問に対して「あり」以外に答えはない

>>222
「あり」が間違いなんて誰も言ってない
もっといいやり方があるって話だ

(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

>>223
もっといいやり方がありますか？
という質問は見当たらないけどｗ

(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

○○なことをしたいのですが、いいやり方はないでしょうか？

この質問に対して「ある」「ない」以外に答えはない

その寄せられた「意見」に対して「不評な意見」が出てるんだよｗ

「不評な意見」かどうかは質問者が決めること

どうして「不評な意見」が出るのか？
ズバリこれねｗ

>>220
いや、218はここで他の人が言ってたことだが

>>219
removeClass()が不要というのはわかるが
他の値（red m)が残っていい場合と、残ってはいけない場合と、その時々による
今回は残ってはいけないとは言ってないが残したくない様子は伺える

<span class="t-sharts" data-color="red" data-size="m" data-material="silk">
の場合結局
attr({"data-color": "blue", "data-size", "l", "data-material". "cotton"})
としないとsilkが残るので同じじゃね？

それとライブラリなど自分でコントロールできないclassも消したい場合
removeClass()のほうが楽に消せるし手っ取り早い

要は静的に付けたclassは変更しないようにしたいということだから
意図する要素にだけ id でも data でも 静的に付けて於けばどうでもいい事
classでやりたいなら個人の勝手
$(el).removeClass().addClass() は単なるメソッドチェーンなんだから否定するのはおかしい
ただの主観に過ぎない

苦しいなぁｗ 頑張ればできると言ってるだけで
やりづらいだけじゃねーか

>>219
詳しくありがとう
でもdata-○○○の○○○は持つ必要があるし（たぶん）
>しなければいけなくなる
理由がいまいちピンときません

それとdata-*でtoggleClassしたい場合どうするのでしょうか？

hasClassもお願いします

>>234
toggleClass使いたいならclass使えば良いんじゃね？

http://blog.jquery.com/2018/01/19/jquery-3-3-0-a-fragrant-bouquet-of-deprecations-and-is-that-a-new-feature/

jQuery(elem).addClass([
'dave', 'micha?',
'oleg', 'richard',
'jason', 'timmy'
]);

http://github.com/jquery/jquery/issues/3532

>>238
このタイミングでそういうレスをした意図がわからないが、
一応言っておくと今回の話題ににはそれが使えない

class="a foo" やclass="a bar"　とあるとき、 一発で
class="a baz" にすることはできないから

HTML で、使えるタグ名・属性名は、決まっているだろ

タグ名の所に、そのタグ内で使える、属性名が書いてあるはず

そもそもdata属性の使い方を勘違い

>>241
どういうこと？

理由を書いてないから推測するしかないが

1. data-*属性は使ってはならない
　→ 使ってもらうために仕様が存在する

2. CSSは属性でスタイルを適用してはいない
　→ 適用していいから属性セレクタが存在する

3. data-*属性は値を入れるだけ。CSSの属性セレクタの対象としてはいけない
　→ そんなことはどこにも書いてない

4. data-*属性はJavaScriptから読み書きしてはいけない
　→ JavaScriptから使わないで何に使うの？CSS用途だけっていいたいの？

5. jQueryではdata-*属性ははdataから使わなければいけない
　→ DOM APIのgetAttributesつかってOKなんだから同等のjQueryのattrもOK

>>242
data属性（カスタム属性）を使うのはその人の勝手
classで用が足せることで本人がそうしたいならその人の勝手
何も間違ってはいないだろ？

>>242
//css
div[data-hoge="before"]{ background-color: gray; }
div[data-hoge="after"]{ background-color: orange; }
//html
<div data-hoge="before">あいうえお</div>
<input type="button" id="btn" value="cosole" />
//js
$('#btn').on('click', function () {
console.log("静的な値をdata('hoge')で取得: ", $('div').data('hoge'));
console.log("動的に値をattr('data-hoge', 'after')に変更する");
$('div').attr("data-hoge", "after");
console.log("動的に変更した値をdata('hoge')で取得: ", $('div').data('hoge'));
console.log("動的に変更した値をattr('data-hoge')で取得: ", $('div').attr('data-hoge'));
});

data()で参照するとキャッシュされた値を出してくるので動的に変更する場合は注意が必要
attr('data-*')で参照すれば問題はないけどね

なにそのくそ仕様誰得なの？

htmlはdata-*で、jqならattrだけでいいんだろ？>>208が言うには

$(el).attr('style', 'color: red; background-color: black;');
なんて面倒なことやらないだろ？
$(el).css({'color': 'red', 'background-color': 'black'});
こうするだろ？

何のためにjQuery使ってんの？ってこと

>>243
正論

>>247
それ好きにすりゃいいレベルの例じゃね？
こんなんまでこっちはまちがいーこっちにしろーとか押し付けられんの？ｗ

http://w3techs.com/technologies/overview/javascript_library/all

w3techsによると2017年1月の時点で71.9%のサイトが
JavaScriptのライブラリとしてjQueryを使用していることが判明したが
それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。

またAngularは0.5%、だがReactが伸びてきており0.5%
とAngularを逆転したことがわかる

だがjQueryには大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される