X



jQuery 質問スレッド vol.8
■ このスレッドは過去ログ倉庫に格納されています
0001Name_Not_Found
垢版 |
2017/10/23(月) 06:31:18.14ID:???
JavaScriptでDOM用ライブラリであるjQueryのスレです。
次スレは>>950>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

このスレはjQueryやjQuery UIの使い方やjQueryプラグインの作り方を質問するスレです。
jQueryを使って作る側のスレであって、こんなプラグインありませんか?と聞くスレではありません。
そういうのは自分で探してください。
ろくにサポートもされてなさそうな野良プラグインの使用はおすすめしません。

JavaScriptの質問は関連スレで質問して下さい。

■前スレ
jQuery 質問スレッド vol.7
https://mevius.5ch.net/test/read.cgi/hp/1478055094/

■関連スレ
JavaScript の質問用スレッド vol.130
https://mevius.5ch.net/test/read.cgi/hp/1501503056/
ECMAScript デス 6
https://mevius.5ch.net/test/read.cgi/tech/1483332914/
JavaScript ライブラリ総合質問所 vol.5
https://echo.5ch.net/test/read.cgi/hp/1465399470/
0157Name_Not_Found
垢版 |
2018/01/30(火) 22:15:23.99ID:???
>>153
すでにbbbがあるか否かの判断がめんどくさくね?
0158Name_Not_Found
垢版 |
2018/01/30(火) 22:19:51.30ID:???
質問はランダムに動的に追加されるclassだけを削除する方法
dataなんて言ってないだろ?w
0159Name_Not_Found
垢版 |
2018/01/31(水) 01:09:50.36ID:???
>>157
どうでもよくね?
<div class="aaa ccc ddd" />

$('.aaa').removeClass('bbb ccc ddd');
しても
<div class="aaa" />
になるだけだろ?え、俺なんか勘違いしてる??
0160Name_Not_Found
垢版 |
2018/01/31(水) 01:56:08.51ID:???
>>156
なんか勘違いしてね?

jQueryのdataじゃなくて
data-x属性だぞ

普通にCSSで使える
[data-name=value]とか書けばいい
0161Name_Not_Found
垢版 |
2018/01/31(水) 02:21:08.91ID:???
.red-text { color: red }
.red-background { background-color: red }

とかしてるんじゃないの?
まあ使いかたが悪いってことだよね
0163Name_Not_Found
垢版 |
2018/01/31(水) 20:48:29.73ID:???
>>159
上にもあったがライブラリのクラスはそれを書かなくてはならない。
つまり仕様が変わると変えなくてはならない。
これは将来的に面倒な要素を残すことになる。

また、仕様変更でeeeが加わった場合にそこも書き直さなくてはならない。

>>140なら自分の初期設定したいクラスだけ書けばいい。
0164Name_Not_Found
垢版 |
2018/01/31(水) 21:25:25.48ID:???
>>163
静的クラスのほうの仕様は変わらない前提?ならいいんじゃない
0165Name_Not_Found
垢版 |
2018/01/31(水) 21:52:29.19ID:???
>>161
2個ならず多い場合に、個別に設定=変更する場合ならありじゃないの?
背景色だけ変えるとか
0166Name_Not_Found
垢版 |
2018/01/31(水) 22:15:20.45ID:???
勝手な憶測書いてそれ前提で否定する人って何が目的なんだろ
0167Name_Not_Found
垢版 |
2018/01/31(水) 22:28:02.20ID:???
>>162
> ならdata-はいらんがな

HTML5違反をして、独自属性をつけるって話?
そりゃそれならいらんだろうなw だがそこは論点じゃない

classではなく独自の属性を使えという話
classを使うと「値のリスト」にしかならない。classという名前は固定
だからclassに自分の知らない値が入ることを考慮する必要が出てくる

独自属性の場合、「独自属性とその値」になる
独自属性には自分の知らない値は入らないので、classを使うよりも
取扱が簡単になる
0168Name_Not_Found
垢版 |
2018/01/31(水) 22:30:33.73ID:???
>>166
推測しかできないような
中途半端な書き込みをするなってことだろw
0169Name_Not_Found
垢版 |
2018/01/31(水) 22:59:49.18ID:???
>>161
横レスだが何が言いたいのかはっきり書いてくれないかな
それだといくつかに取れる

>>168
なら手順的には先ず尋ねるべきだな
0170Name_Not_Found
垢版 |
2018/01/31(水) 23:04:33.16ID:???
>>169
> 横レスだが何が言いたいのかはっきり書いてくれないかな

クラス名 = スタイル になっているということだよ
0171Name_Not_Found
垢版 |
2018/01/31(水) 23:05:47.12ID:???
>>169
> なら手順的には先ず尋ねるべきだな

尋ねる前にヒントだけしかかかないような書き込みしてるだろ

>>151
> ヒントだけ書くとスポーツやトラフィックや・・・

ヒントしか言わないやつは推測で答えられても文句は言わない
0172Name_Not_Found
垢版 |
2018/01/31(水) 23:06:11.96ID:???
文句は言えない の間違い
0173Name_Not_Found
垢版 |
2018/02/01(木) 09:03:11.33ID:???
>>167
classは、すべての要素に対して使用することが出来る「分類名」
data-は、htmlの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」

勘違いするなよw
0174Name_Not_Found
垢版 |
2018/02/01(木) 20:23:09.07ID:???
>>168
どう中途半端?

>>140 こういう書き方はあり?(yes|no?)
>>141 yes
単純明快、しかもすでに解決済み。
横から妄想書いてるのがゴチャゴチャ言ってるだけでは。
0175Name_Not_Found
垢版 |
2018/02/01(木) 20:31:22.31ID:???
妄想とは>>161などな。
すでに論点完全に外れてるからな。
0176Name_Not_Found
垢版 |
2018/02/01(木) 21:24:32.76ID:???
>>171
ヒントだけってのは俺だがわざわざ書くまでもなく容易に想像できるだろうよ
条件1→aaaの一部の状態を変化(aaa)
条件2→aaaの一部の状態を変化(bbb)
条件3→aaaの一部の状態を変化(ccc)
条件は単なるifだけじゃないぞ
ユーザ入力や関数などな
0177Name_Not_Found
垢版 |
2018/02/02(金) 00:28:09.06ID:???
>>173
> data-は、htmlの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」
だから独自データだからdata-*使えってことでしょ?何が言いたいのか分からん
data-*の使い方がわからないっていうのならサンプル見つけてあげるよ

https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>
Custom data attributes (e.g. data-foldername or data-msgid) can b
<li data-length="2m11s">Beyond The Sea</li>
<p>The third <span data-mytrans-de="Anspruch">claim</span>
Here, the data-has-payment-request attribute is
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">

こういう使い方をする。この要素は「○だ」みたいな言い方ではなく
この要素の「○は△だ」みたいな時にdata-*を使うと良い

一番上の例だと、この要素のtextureはdeep pileだみたいな言い方ね
これをclassに入れて、class="carpet deep-pile" みたいにしてしまうと、テクスチャの種類が増えるたびに
removeClass(ほげ)のほげの種類がたくさん増えて困ってるっていうのが今の話題

「○は△だ」みたいなときはdata-*を使えば良いんだよ
CSSでもdata-*に対してスタイルを設定できる

特に属性セレクタの (https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors より)
> [attr~=value] attr という名前の、値がスペースで区切られた項目リストであり、うち 1 つが正確に "value" である属性を持つ要素を表します。

↑ これはカスタム属性をclassと同じようにスペース区切りの値として使うことを目的として作られたようなもの
(class以外でスペース区切りで値を入れるものなんてないでしょ?)
0178Name_Not_Found
垢版 |
2018/02/02(金) 00:30:32.60ID:???
だれか >>176 が言ってることを
説明できる人いる?
0179Name_Not_Found
垢版 |
2018/02/02(金) 08:57:56.34ID:???
>>177
>>140の質問に対しては>>174の通り解決している
根本的に受け答えの問題で質問の主旨を理解しよう
0180Name_Not_Found
垢版 |
2018/02/02(金) 20:18:57.98ID:???
【悲報】現在自演中の>>141さん、質問主の>>140からは完全に無視されていたwwwww
0181Name_Not_Found
垢版 |
2018/02/03(土) 09:30:25.90ID:???
>>178
なるほどな、それがわからないからわけわからん書き込みが湧いてるのだな
説明も何もそのままだぞ
逆に何がわからないのか聞けばいい
0182Name_Not_Found
垢版 |
2018/02/03(土) 09:55:44.12ID:???
やっぱり>>176が言ってることを説明できない=意味不明だから誰も理解できなかったようだね
0183Name_Not_Found
垢版 |
2018/02/03(土) 10:11:40.72ID:???
理解できてる人もいるのに誰もとはいかに

大雑把な例えだが
役員だけaに変える、新入社員だけbに変える、女性社員だけcに変える
新入社員で女性社員はbとcになる
0184Name_Not_Found
垢版 |
2018/02/03(土) 10:22:26.33ID:???
はぁ? 説明できる人いる?って聞いただろ
誰も答えてないのになんでいると証明できる?
0185Name_Not_Found
垢版 |
2018/02/03(土) 10:33:41.17ID:???
>>183でわからないならそれでいいんじゃない
誰も困らないから
0186Name_Not_Found
垢版 |
2018/02/03(土) 10:34:11.00ID:???
>>183
関係ないけどそんな仕事したなあ

新入社員の名前は明るい緑で、女性の名前は明るい赤でっていわれて
じゃあ女性の新入社員の名前の色はどちらにしますかってきいたら

話きいてた? 明るい緑と明るい赤に決まってるでしょ?
0187Name_Not_Found
垢版 |
2018/02/03(土) 10:37:12.99ID:???
匿名掲示板しかもIDなしスレで証明とかもうね
0188Name_Not_Found
垢版 |
2018/02/03(土) 10:39:47.40ID:???
>>183
> 役員だけaに変える、新入社員だけbに変える、女性社員だけcに変える
> 新入社員で女性社員はbとcになる

それがどうしたの?

>>177にも書いているが
「○は△だ」みたいなときはdata-*を使えば良いんだよ
CSSでもdata-*に対してスタイルを設定できる

<span class="person" data-position="officer data-proficiency="newly" data-gender="female">

[data-proficiency="newly"] {
  font-weight: bold;
}

[data-gender="female"] {
  color: red;
}

複数の異なった属性を、属性名をつけずに全部クラスに入れるから
removeClass(ほげ)のほげの種類がたくさん増えて困ってるっていうのが
今の話題だって言ってる
0189Name_Not_Found
垢版 |
2018/02/03(土) 10:47:27.69ID:???
>>186
あるある
ちなみに補足しておくと以下の場合も考えられる

上書きで後者指定優先(あまりすすまないが)

全て色とは限らず、色形位置などかぶらない状態

全て色でもその社員の同じ位置とは限らない
顔胴体背景、更に擬似要素で別部分


>>188
data-とは話は分岐されている
というかアンカ追え
0190Name_Not_Found
垢版 |
2018/02/03(土) 10:51:34.29ID:???
アンカ? こんな感じだろ

145 自分:Name_Not_Found[sage] 投稿日:2018/01/28(日) 21:03:38.80 ID:???
一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる
↓↓↓↓↓

147 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 21:59:16.24 ID:???
たしかになんでそんなクラス付け外しするんだ
↓↓↓↓↓

151 名前:Name_Not_Found[sage] 投稿日:2018/01/29(月) 21:22:55.42 ID:???
>>147
ただ記事やブログ書いてるだけならそんないらんよ
ちょっと特殊な場合だな
ヒントだけ書くとスポーツやトラフィックや・・・
↓↓↓↓↓

>>151
> ヒントだけ書くとスポーツやトラフィックや・・・
ヒントしか言わないやつは推測で答えられても文句は言わない
↓↓↓↓↓

176 名前:Name_Not_Found[sage] 投稿日:2018/02/01(木) 21:24:32.76 ID:???
>>171
ヒントだけってのは俺だがわざわざ書くまでもなく容易に想像できるだろうよ
条件1→aaaの一部の状態を変化(aaa)

↓↓↓↓↓

182 自分:Name_Not_Found[sage] 投稿日:2018/02/03(土) 09:55:44.12 ID:???
やっぱり>>176が言ってることを説明できない=意味不明だから誰も理解できなかったようだね
0191Name_Not_Found
垢版 |
2018/02/03(土) 10:53:42.27ID:???
アンカたどればわかるが、

結局のところ一つの要素に、そんなにクラスを
設定する必要があるってのがそもそも間違いなんだよ。

一つのclassにいろんな属性をごちゃ混ぜでぶち込むから
管理できなくなってるんだろうが。

data-*を使って属性の種類ごとに分ければ良い
異なった属性を全部classに入れるな
0192Name_Not_Found
垢版 |
2018/02/03(土) 10:57:38.02ID:???
>>191
>一つのclassにいろんな属性をごちゃ混ぜでぶち込む

どれのこと?
0193Name_Not_Found
垢版 |
2018/02/03(土) 11:03:27.48ID:???
>>192
アンカたどれ
これのことだ

145 自分:Name_Not_Found[sage] 投稿日:2018/01/28(日) 21:03:38.80 ID:???
一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる

もっとたどるならこれのことだ

140 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 10:57:06.54 ID:???
.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
$('.aaa').removeClass('bbb ccc ddd・・・');

$('.aaa').removeClass().addClass('aaa');
とするのはあり?

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと
0194Name_Not_Found
垢版 |
2018/02/03(土) 11:07:33.86ID:???
$('.aaa').removeClass('bbb ccc ddd・・・');
で一つづつremoveClassするのは大変だからって
$('.aaa').removeClass() してしまうのは
>>142が指摘したとおりの問題が有る


142 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん



> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて

となるのは、classに複数の異なった属性を属性を入れてしまうから
管理が面倒になるほどの自体になる。
そして>>183もその通りのことをやってしまった。
複数の異なった属性を一つのclassに入れてしまうから
classの値がたくさん増えることになり管理が面倒になる
0195Name_Not_Found
垢版 |
2018/02/03(土) 11:07:45.44ID:???
>>190
だろっていちいち書くなよ、うざいな
専ブラ使ってないのか?
0196Name_Not_Found
垢版 |
2018/02/03(土) 11:08:37.19ID:???
>>195
5ちゃんねるの使い方の話は、別件だからおいておこうか?
0197183
垢版 |
2018/02/03(土) 11:10:46.78ID:???
>>194
全然面倒ではないが何か?
こういう案件自体はあるだろ
0198Name_Not_Found
垢版 |
2018/02/03(土) 11:12:25.49ID:???
> 全然面倒ではないが何か?

質問者が面倒だって言ってるのに
何を言ってるんだおまえは?
0200Name_Not_Found
垢版 |
2018/02/03(土) 11:17:38.83ID:???
>>176がわからない→例え>>183
やってしまったもなにもないわな
アンカで追えてないのか話が混ざってる気がする
0201Name_Not_Found
垢版 |
2018/02/03(土) 11:21:44.57ID:???
>>193それは見てますよ
それのどこが一つのclassになのでしょうか?
0202Name_Not_Found
垢版 |
2018/02/03(土) 11:24:28.33ID:???
>>199
それ俺が書いたんだけど?

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

で、おまえは誰?何をやった?
0203Name_Not_Found
垢版 |
2018/02/03(土) 11:25:13.17ID:???
>>201
> それのどこが一つのclassになのでしょうか?

一つの要素にclass属性は"一つ"しかありませんよw
data-*属性はいくつでも作れますがね
0204Name_Not_Found
垢版 |
2018/02/03(土) 11:33:17.27ID:???
>>203
>>194に”複数の異なった属性を一つのclassに入れてしまう”と?

ついでに質問いいすか?
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか?
リセットするときどうするのでしょうか?
もし各data-*ごとに消すならaddClassとさほど変わらない気がしますが
0205Name_Not_Found
垢版 |
2018/02/03(土) 11:36:45.23ID:???
ここで誰?ってw
名前まで入れてるのにな
0206Name_Not_Found
垢版 |
2018/02/03(土) 11:40:50.91ID:???
それもだが上に出てたライブラリで勝手に〜はどうするんだろうな
むろんdata-*を否定するわけではないが
0207Name_Not_Found
垢版 |
2018/02/03(土) 12:11:07.34ID:???
>>188
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。
>>188でどう解決するのか。
同じく聞きたい。
0208Name_Not_Found
垢版 |
2018/02/03(土) 12:31:43.55ID:???
>>204
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか?
そう。attrメソッドで変える。

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

> もし各data-*ごとに消すならaddClassとさほど変わらない気がしますが

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

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

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

もちろんライブラリでもdata-*を使っていて名前がが被る可能性があるが、
それはclassの値でも一緒の話だし名前の付け方を工夫すればよい
0209Name_Not_Found
垢版 |
2018/02/03(土) 12:34:14.77ID:???
>>207
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。

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

それに加え

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

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

data-*だと、既存のコードが参照してないグループ(data-*属性)が
追加されただけなので、既存のコードとは無関係となる
0210Name_Not_Found
垢版 |
2018/02/03(土) 12:54:54.71ID:???
もうちょっと具体的に話をする

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の値に特殊な名前つけルールを作って
そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw
whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw
0211Name_Not_Found
垢版 |
2018/02/03(土) 13:11:48.31ID:???
ちなみに初期値に設定するのは
$("#id").attr(resetValue)
だけでいいで? attrはハッシュ値を受け付けるからよ
0212Name_Not_Found
垢版 |
2018/02/03(土) 13:25:20.80ID:???
>>208
グループも何も静的1個(または2個)で済む方法がある>>140
>>142のことはスッキリしない人がいるかもしれんだろうが>>141ならそれでいいんじゃね
0213Name_Not_Found
垢版 |
2018/02/03(土) 13:29:07.74ID:???
>>141の「ええよ」は、その一つ前のレスの質問者(>>140)へのレスであって
>>142の問題があるけどどうする?に対する「ええよ」じゃないぞ?(時系列注意)
0214Name_Not_Found
垢版 |
2018/02/03(土) 13:36:55.41ID:???
というか、 >>142で
> それだと静的に付けたclassまで消えちゃうじゃん
という指摘にたいして

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

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

それからもっといい案(data-*)が出てるわけでしょ
ほんと時系列注意なw
0215Name_Not_Found
垢版 |
2018/02/03(土) 13:57:15.50ID:???
んなこたわかってる
そもそも>>140だって元々>>142の問題を承知で書いてる
だからわざわざaaaを付け直してるんだろ
0216Name_Not_Found
垢版 |
2018/02/03(土) 13:59:01.33ID:???
だがdata-*を使ったもっといいやり方には
気づいていなかった
0217204
垢版 |
2018/02/03(土) 14:09:59.66ID:???
>>208
おおまかわかりました、が
>他の値が同時に設定されていることを考えなくて済む
はclassでも同じことではないでしょうか?重複する変な付け方してなければ

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

とした場合>>210
>としなければいけなくなる
の関連がよくわかりません
0218Name_Not_Found
垢版 |
2018/02/03(土) 14:18:56.48ID:???
もっといいやり方かどうかは質問者が決めること
0219Name_Not_Found
垢版 |
2018/02/03(土) 15:00:32.75ID:???
>>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みたいな色のリストを持たなければいけない
その他の色やサイズのリストとその初期値をすべて持って置かないといけない
0220Name_Not_Found
垢版 |
2018/02/03(土) 15:01:56.65ID:???
>>218
質問者 = 初心者 と仮定すると(この仮定は概ね正しい)
初心者がいいやり方を決められる訳がない
0221Name_Not_Found
垢版 |
2018/02/03(土) 15:05:49.41ID:???
いいやり方は上級者が決める
だがいいやり方は、簡単なやり方とは限らない
いいやり方をするには技術が必要な場合があるからだ
(スポーツとかに置き換えればわかるだろう)

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

初心者が決めたのは良いか悪いかではなく、
いいやり方を自分がやるかどうかを決めただけ
0222Name_Not_Found
垢版 |
2018/02/03(土) 15:10:12.79ID:???
>>140の質問を要約すると、

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

この質問に対して「あり」以外に答えはない
0223Name_Not_Found
垢版 |
2018/02/03(土) 15:11:16.38ID:???
>>222
「あり」が間違いなんて誰も言ってない
もっといいやり方があるって話だ

(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
0224Name_Not_Found
垢版 |
2018/02/03(土) 15:15:36.54ID:???
>>223
もっといいやり方がありますか?
という質問は見当たらないけどw
0225Name_Not_Found
垢版 |
2018/02/03(土) 15:16:25.44ID:???
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。
0226Name_Not_Found
垢版 |
2018/02/03(土) 15:24:28.07ID:???
○○なことをしたいのですが、いいやり方はないでしょうか?

この質問に対して「ある」「ない」以外に答えはない
0227Name_Not_Found
垢版 |
2018/02/03(土) 15:27:50.87ID:???
その寄せられた「意見」に対して「不評な意見」が出てるんだよw
0228Name_Not_Found
垢版 |
2018/02/03(土) 15:30:26.68ID:???
「不評な意見」かどうかは質問者が決めること
0229Name_Not_Found
垢版 |
2018/02/03(土) 15:38:00.81ID:???
どうして「不評な意見」が出るのか?
ズバリこれねw
0230Name_Not_Found
垢版 |
2018/02/03(土) 18:55:50.02ID:???
>>220
いや、218はここで他の人が言ってたことだが
0231Name_Not_Found
垢版 |
2018/02/03(土) 19:20:28.93ID:???
>>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()のほうが楽に消せるし手っ取り早い
0232Name_Not_Found
垢版 |
2018/02/03(土) 19:34:38.86ID:???
要は静的に付けたclassは変更しないようにしたいということだから
意図する要素にだけ id でも data でも 静的に付けて於けばどうでもいい事
classでやりたいなら個人の勝手
$(el).removeClass().addClass() は単なるメソッドチェーンなんだから否定するのはおかしい
ただの主観に過ぎない
0233Name_Not_Found
垢版 |
2018/02/03(土) 19:53:19.81ID:???
苦しいなぁw 頑張ればできると言ってるだけで
やりづらいだけじゃねーか
0234204
垢版 |
2018/02/03(土) 20:37:15.05ID:???
>>219
詳しくありがとう
でもdata-○○○の○○○は持つ必要があるし(たぶん)
>しなければいけなくなる
理由がいまいちピンときません

それとdata-*でtoggleClassしたい場合どうするのでしょうか?
0235204
垢版 |
2018/02/03(土) 20:38:42.01ID:???
hasClassもお願いします
0236Name_Not_Found
垢版 |
2018/02/03(土) 20:39:38.30ID:???
>>234
toggleClass使いたいならclass使えば良いんじゃね?
0237Name_Not_Found
垢版 |
2018/02/05(月) 10:32:39.54ID:2tyb78tP
上の流れと別件として、読んでで気になったので
>>167の、HTML5違反をして、独自属性をつけるって話?の箇所
data-hogeでなく

HTML <tag hoge=値>
CSS [hoge] {}
jq attr('hoge', '値')

は違反ってことですか?
そのソース(原文)を知りたいです
0239Name_Not_Found
垢版 |
2018/02/06(火) 00:03:02.57ID:???
>>238
このタイミングでそういうレスをした意図がわからないが、
一応言っておくと今回の話題ににはそれが使えない

class="a foo" やclass="a bar" とあるとき、 一発で
class="a baz" にすることはできないから
0240Name_Not_Found
垢版 |
2018/02/07(水) 07:50:22.73ID:???
HTML で、使えるタグ名・属性名は、決まっているだろ

タグ名の所に、そのタグ内で使える、属性名が書いてあるはず
0241Name_Not_Found
垢版 |
2018/02/07(水) 08:28:25.69ID:???
そもそもdata属性の使い方を勘違い
0242Name_Not_Found
垢版 |
2018/02/07(水) 23:21:56.08ID:???
>>241
どういうこと?

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

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

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

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

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

5. jQueryではdata-*属性ははdataから使わなければいけない
 → DOM APIのgetAttributesつかってOKなんだから同等のjQueryのattrもOK
0243Name_Not_Found
垢版 |
2018/02/08(木) 08:23:18.25ID:???
>>242
data属性(カスタム属性)を使うのはその人の勝手
classで用が足せることで本人がそうしたいならその人の勝手
何も間違ってはいないだろ?
0244Name_Not_Found
垢版 |
2018/02/09(金) 13:03:26.98ID:???
>>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-*')で参照すれば問題はないけどね
0245Name_Not_Found
垢版 |
2018/02/09(金) 19:48:01.38ID:???
なにそのくそ仕様誰得なの?
0246Name_Not_Found
垢版 |
2018/02/10(土) 21:24:34.36ID:???
htmlはdata-*で、jqならattrだけでいいんだろ?>>208が言うには
0247Name_Not_Found
垢版 |
2018/02/10(土) 21:59:45.85ID:???
$(el).attr('style', 'color: red; background-color: black;');
なんて面倒なことやらないだろ?
$(el).css({'color': 'red', 'background-color': 'black'});
こうするだろ?

何のためにjQuery使ってんの?ってこと
0249Name_Not_Found
垢版 |
2018/02/10(土) 23:46:25.77ID:???
>>247
それ好きにすりゃいいレベルの例じゃね?
こんなんまでこっちはまちがいーこっちにしろーとか押し付けられんの?w
0250Name_Not_Found
垢版 |
2018/02/11(日) 02:21:47.96ID:???
https://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には大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される
0251Name_Not_Found
垢版 |
2018/02/11(日) 02:26:04.86ID:???
>>245
> なにそのくそ仕様誰得なの?

もともとdata-*属性なんてなかった
jQueryのdataの方が先に作られた

jQueryのdataはdata-*属性を書き換えるものじゃない。
メモリの中に要素に関連づいたデータを持たせるためのもの
だからdata-*属性ではもたせられないようなオブジェクトでも持たせられる
data-*は属性はjQueryのdataの初期値としても使われるってだけの話

そしてdata-*属性は、属性なのだからattrメソッドで操作すれば良い
0252Name_Not_Found
垢版 |
2018/02/11(日) 02:26:56.76ID:???
>>247
> 何のためにjQuery使ってんの?ってこと

jQueryオブジェクトのためだよ
別にdataメソッドのためじゃない
0253Name_Not_Found
垢版 |
2018/02/11(日) 02:37:35.15ID:???
>>247
> $(el).attr('style', 'color: red; background-color: black;');
> なんて面倒なことやらないだろ?
> $(el).css({'color': 'red', 'background-color': 'black'});
> こうするだろ?

面倒くさい以前に意味が違ってる。
前者はstyle属性まるまる入れ替え。値を文字列としてそのまま使う

後者はJavaScriptからみたstyleプロパティの値。
既存のスタイルを残して、指定したものだけ置き換えるだけ

例えばこういうHTMLがあって
<span id="id" style="color: #000">red</span>

attrで取得したときは 'color: #000' が返ってくるが
cssメソッドだとcolorの値は 'rgb(0, 0, 0)' となる。

attrとcssは本来は目的によって使い分けるもの
ただstyleの場合、属性として読み書きすることが少ないってだけ
0254Name_Not_Found
垢版 |
2018/02/11(日) 03:08:31.15ID:???
>>251
大変勉強になりました。くそ仕様とか言ってごめんなさいm(_ _)m
0255Name_Not_Found
垢版 |
2018/02/11(日) 09:10:48.67ID:???
>>253
>>247はそんなことを言ってるんじゃないだろ?
$(el).css('color', 'red');
$(el).hover(
function(){ $(this).attr('style', 'color: blue;'); },
function(){ $(this).attr('style', 'color: red;');}
);
なんてやらないだろ?ってことだろ
0256Name_Not_Found
垢版 |
2018/02/11(日) 10:07:14.91ID:???
>>255
だって、それだとstyleについているかも知れない
color以外のものまで変わってしまうじゃん

そういう将来的に不具合の元になるような
ことはやらないよ。それが>>253に書いて有ることだよ
■ このスレッドは過去ログ倉庫に格納されています

ニューススポーツなんでも実況