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/
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に書いて有ることだよ
0257Name_Not_Found
垢版 |
2018/02/11(日) 10:30:59.66ID:???
>>256
attr()は単なる文字列操作
css()はハッシュ関数で値を操作できる
どちらが有利かということだろ
0258Name_Not_Found
垢版 |
2018/02/11(日) 11:41:09.15ID:???
>>257
違う

attr()はその名の通り要素の属性値を変更するもの
DOM APIで言えばsetAttribute/getAttribute相当のもの

それに対してcss()は、要素の属性値ではなくDOMのstyleプロパティの値を読み書きしている
style属性とstyleプロパティは、そのまま一対一で対応しているわけではない

例えば <span style="background: border-box">と属性で指定した時、
element.style.backgroundColor は initialとなる。属性には何も書いていないのに設定される

さらにcss()による読み込みは単純にstyleプロパティを読み込むだけじゃなく
window.getComputedStyle() を使って最終的なスタイル情報を取得している。

具体的に言うと span { color: red } 、<span style="background-color: blue">
とあった時、attrでは"background-color: blue"としかわからずcolorがredであることは分からないが、
css()ではcolorがred(正確にはChromeではrgb(255,0,0))ということがわかる

またcss()による設定もDOM API的にはelement.style.color = 'red' のような形で実行される
それが最終的に要素の属性に反映されるのだろうがそれはブラウザがやっていることで、どういう属性になるかは不明
例えば .css({borderTop: '1px', borderBottom: '1px', borderLeft: '1px', borderRight: '1px'}) とすると
style="border-width: 1px; border-style: initial; border-color: initial;" となった(Chromeの場合)

またcss()は一部のプロパティに対してはベンダープレフィックスを自動的に追加する機能も持っている

まとめるとattr()は要素の属性をそのまま読み書きするもので、
css()は、読み込みはDOMが解釈した要素の(実際の)スタイルを読み書きし
要素の属性をそのまま読み込んだり反映したりしているわけではない

要素の属性をそのまま変えたいときはattr(), DOMのstyleプロパティとして変えたいときはcss()
使う目的が違っている
0259Name_Not_Found
垢版 |
2018/02/11(日) 12:46:51.75ID:???
>>251
>data-*属性ではもたせられないようなオブジェクト
とは例えば何でしょうか?
{'plice': '100', 'size': 'L'} のようなオブジェクトならattrメソッドで取得設定できるが関数とかかな?
0260Name_Not_Found
垢版 |
2018/02/11(日) 12:55:41.36ID:???
>>258
ハッシュ(値)  → 値
属性(名称)  → 文字列

これだけのこと
0261Name_Not_Found
垢版 |
2018/02/11(日) 12:56:17.76ID:???
>>259
それ、もたせられないよ。

どの要素にも有るグローバル属性のtitleを使って

$('#id').attr('title', {'plice': '100', 'size': 'L'} );
console.log($('#id').attr('title'));

これで試してみ、 [object Object] という文字列になってしまう

JavaScriptのオブジェクトは、文字列ではないので属性値として使えないからね
(正確には強制的にtoString()が呼び出され文字列に変換してしまう)
0262Name_Not_Found
垢版 |
2018/02/11(日) 12:57:27.23ID:???
>>260
>>258で反論してることを一切無視して
話を戻そうとしても無駄w

お前が言ったそれが間違っていることは>>258に書いた。
それに対して無視すること自体が
お前が間違ってることをお前自身で認めたようなもんだよw
0263Name_Not_Found
垢版 |
2018/02/11(日) 13:16:02.13ID:???
>>261
なんで変えてるのでしょうか
そりゃtitleには入れられないでしょうからそれならこれで
$('#id').attr({title,: 'hoge', target: '_blank'});
0264Name_Not_Found
垢版 |
2018/02/11(日) 13:20:22.05ID:???
ようは
$(el).attr('style', 'color: red; background-color: black;');
なんてしないし
$(el).css({'color': 'red', 'background-color': 'black'});
は更に(最終的によほどでないと)しないし、style持ち出すのは話別なんじゃないの、と
0265Name_Not_Found
垢版 |
2018/02/11(日) 13:36:58.03ID:???
>>263
> $('#id').attr({title,: 'hoge', target: '_blank'});

それは、title属性にhogeという文字列を入れる
target属性に_blankという文字列を入れるという意味で
入れてるのは文字列になってる

俺は属性にオブジェクト入れられないって言ってるの

少しは頭使ったら?
0266Name_Not_Found
垢版 |
2018/02/11(日) 14:11:45.61ID:???
ひでえ言い方だな
このスレに向かない人なんだな
0267Name_Not_Found
垢版 |
2018/02/11(日) 14:17:11.47ID:???
だから? 言い方の話にすり替えないように
0268Name_Not_Found
垢版 |
2018/02/11(日) 14:19:44.44ID:???
それ言ったらこれもだから?だな

>入れてるのは文字列になってる
>俺は属性にオブジェクト入れられない
0269Name_Not_Found
垢版 |
2018/02/11(日) 14:27:50.35ID:???
つーか、やってみればわかるのにな
priceをpliceと書き間違えるようなやつじゃ無理かw

var hash = {price: 100, size: "L"};

$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}

$('#id').attr('data-value', hash );
console.log($('#id').attr('data-value')); => [object Object]


HTML属性用のattrだと文字列化されるからハッシュを入れることはできない



↓はおまけ。attrだと文字列化されるから数値を入れても文字列に変えられてしまう

$('#id').data(hash);
console.log(typeof $('#id').data('price')); => number

$('#id').attr(hash); // data-を付けずに、price属性、size属性を作ってるからHTML5的には違反
console.log(typeof $('#id').attr('price')); => string
0270Name_Not_Found
垢版 |
2018/02/11(日) 14:29:07.84ID:???
>>268
attrでは属性にオブジェクトは入れられないよ
>>269で証明済み
0271Name_Not_Found
垢版 |
2018/02/11(日) 14:53:25.49ID:???
JSONで出し入れすればできる
強引だが
0272Name_Not_Found
垢版 |
2018/02/11(日) 14:59:04.25ID:???
でそのdata-*やら属性やらが「classよりいい」と関係してるのかね?
toggleClassや他のclassの削除はスルーなんかな
0273Name_Not_Found
垢版 |
2018/02/11(日) 15:03:19.43ID:???
それはJSONを使ってオブジェクトを文字列にすればって意味なので
属性にオブジェクトを入れてることにはならない

加えてJSON文字列に文字列化(シリアライズ)できないものや
情報が失われてしまうものがオブジェクトに
含まれている場合にもやっぱり対応できない

例えば関数とか日付型とかDOM要素とか。
JSONを拡張して頑張れば、少しはましになるかもしれないけど
DOM要素のシリアライズとかまず無理だろうね
0274Name_Not_Found
垢版 |
2018/02/11(日) 15:11:51.12ID:???
>>272
> でそのdata-*やら属性やらが「classよりいい」と関係してるのかね?
誤解されるような書き方をするな。わざとか?

> toggleClassや他のclassの削除はスルーなんかな
すでに回答済みだったはずだが?



もう一回書いてやると、
<span class="button color-white size-M">
みたいな書き方をしていて、colorは全12色みたいにもっと色があって
sizeにもS, M, L, LL みたいに複数サイズがあったとする

これをclassを操作して
<span class="button color-red size-l">
のように変えるのは大変。コード側に全ての色を定義して一旦全部
removeClassするか、全てのクラス値を列挙してプリフィックスで見分けるようなコードが必要になる

そういう使い方の場合、data-*属性のほうが、classを使うより良いという話

<span class="button" data-color="white" data-size="M"> を
<span class="button" data-color="red" data-size="L"> に書き換えるならば
$(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり


こういう話が先にあって、その流れでdata-*やら属性やらが「classよりいい」と言ってる
0275Name_Not_Found
垢版 |
2018/02/11(日) 16:42:04.87ID:???
propっていう関数もなかったっけ?
あれはどういうときに使うべき?
使い分けの方針を教えてください。
0276Name_Not_Found
垢版 |
2018/02/11(日) 18:05:31.33ID:???
>少しは頭使ったら?
>priceをpliceと書き間違えるようなやつじゃ無理かw

こういう余計なこと書かなきゃいいのに
それで嫌われてるんだろうな

あ、自分で部下に頼れると自慢してた人かな?w
0279Name_Not_Found
垢版 |
2018/02/11(日) 18:48:22.80ID:???
>>278
> 「1つの属性に」オブジェクトを入れられないということでいいですよね

最初からそう言ってる。属性は文字列しか受け付けられないから
オブジェクトを入れようとしても文字列化される

data()メソッドはもともと要素に紐付いたデータを保存するための仕組みで
オブジェクト等自由に入れることができる。

data()メソッドはdata-*属性と無関係・・・と言いたいところだが
data()メソッドの初期値として利用される。だけどそれだけ。
基本的にはdata()メソッドはdata-*属性を読み書きするものじゃない


> 入れられないというか同時設定できるだけということでいいですよね
複数の属性に同時設定できるという機能を、属性にオブジェクトを代入できると
勘違いしてしまったかわいそうな人がいるという話。

何も言うが属性にはオブジェクト入れられない。入れられるのは文字列だけ。
だからattr()メソッドを使って複数の属性に値を入れようとしても、
入れられるのは文字列だけ。値がオブジェクトだと当然設定することはできない。

つまり
$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
みたいに、属性の値がオブジェクトになっていれば当然入れることはできない
0280Name_Not_Found
垢版 |
2018/02/11(日) 18:49:59.80ID:???
なるほど、attrで設定できるのは文字列だけってことだな
0281Name_Not_Found
垢版 |
2018/02/11(日) 18:50:13.94ID:???
>>262
<el data-*= 'value'>
$(el).data('value')
この値の扱いの違い例えてを言ってやって上げてるのに
おまえのオツムでは理解できないみたいだね
0282Name_Not_Found
垢版 |
2018/02/11(日) 18:52:06.79ID:???
<el data-*= 'value'> ってなんだ?

まさか * がいろんな文字を意味するってことすら
分かってないのか?
0283Name_Not_Found
垢版 |
2018/02/11(日) 18:53:41.90ID:???
ちょっとかわいそうなんで>>281に教えてあげると

$(el).data('value') で(あくまで初期値としてだが)
読み取るのはdata-value属性
data-*属性ではない。

data-valueという属性の名前になるんだよ
0285Name_Not_Found
垢版 |
2018/02/11(日) 18:59:57.07ID:???
>>279
>>259=>>278ですがどうも
それまでの他の書き込みに惑わされました
pliceは指摘ありがと(きついけど)
0286Name_Not_Found
垢版 |
2018/02/11(日) 19:03:22.35ID:???
結論としては、attrメソッドは属性に文字列を設定するものだから
当然オブジェクト入れられない、入れようとしても文字列化されるので
実質意味がない。

それに対してdataメソッドは内部的に要素に関連したデータを
持たせる物。だから文字列以外のオブジェクトをもたせることができる
同じdataで惑わされているようだが、attr(data-*)とdata(*)は
本質的には別物
0287Name_Not_Found
垢版 |
2018/02/11(日) 19:09:41.08ID:???
pliceといえばspliceとsliceでいつも混乱します。どうやって覚えたらいいですか?そもそもスライスは分かるけどspliceってどういう意味ですか?
APIにマイナーな英単語使うなや糞メリケンファック
0289Name_Not_Found
垢版 |
2018/02/11(日) 19:32:37.32ID:???
>>288
わかってるお前が解説しろ

本当に分かってないのはお前だろうからさ
0290Name_Not_Found
垢版 |
2018/02/11(日) 19:36:41.26ID:???
>>286
>>279
>$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
>みたいに、属性の値がオブジェクトになっていれば当然入れることはできない
は(私は最初から)okですが、とすると

>>208
>例えば、class="black white red yellow"
なんてことはせず、するなら例えば
class="black m cotton"
である場合、208のグループ化にメリットありますか?
0291Name_Not_Found
垢版 |
2018/02/11(日) 19:40:12.26ID:???
prop()との使い分けは?ねぇねぇ
0292Name_Not_Found
垢版 |
2018/02/11(日) 19:58:36.27ID:???
>>291
自分で調べてなかったの?

attrはHTMLの属性を読み書きするもの
propはHTMLの属性ではなくDOMのプロパティを読み書きするもの

DOMのプロパティを読み書きした結果、属性に反映されるかも知れないが
それはブラウザが勝手にやっていること

なので例えばchecked属性が空の時でも、attrで読み取るとundefiendであるが
DOMプロパティ的にはfalseなのでpropを使うとfalseになる

参照先がHTMLの属性かDOMのプロパティかの違いだよ
その点でattr()メソッドとcss()メソッドの関係と似ているね。
0293Name_Not_Found
垢版 |
2018/02/11(日) 19:59:48.34ID:???
>>290

> なんてことはせず、するなら例えば
> class="black m cotton"
> である場合、


どういう意味? まず日本語
0294Name_Not_Found
垢版 |
2018/02/11(日) 20:16:26.44ID:???
>>293
>>189のような場合は別として各classがかぶらない
blackはredやgreenになり、mはlやsになり
blackはmがあろうがなかろうが何の値だろうが関係なく、mもしかり

という場合です
0296Name_Not_Found
垢版 |
2018/02/11(日) 20:26:48.13ID:???
>>294
> blackはredやgreenになり

それをclassで実現するの大変なんだわ

だって、"hoge black" とかあって、
この内blackだけをredにするわけだろ?

この時、blackとred以外にどんな色があるかは不明とする。
またhogeはhoge以外にもどんなものが来るかは不明とする

この場合に、blackをredにする方法、どういうのがある?
0297Name_Not_Found
垢版 |
2018/02/11(日) 20:53:15.03ID:???
>>296
私ではありませんが>>153>>140とか
でも前者はmyTagsをいじるのかえって大変ですね
0298Name_Not_Found
垢版 |
2018/02/11(日) 20:55:48.57ID:???
>>297
そういうこと。それに比べてdata-*属性を使えば
単純な一メソッド呼び出しで完結してしまう
0299Name_Not_Found
垢版 |
2018/02/11(日) 21:10:54.37ID:???
それが合理的な方法であることは分かったけど>>140には「.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく」って書いてあるから質問に対する答えになってなくね?
結局>>140に対する回答はどうなるの?
0300Name_Not_Found
垢版 |
2018/02/11(日) 21:15:39.71ID:???
>>299
回答なら書いてあるじゃん

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

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと
0301Name_Not_Found
垢版 |
2018/02/11(日) 21:24:41.98ID:???
直接的には書いてないけど、つまり>>140の質問に対する答えは「なし」ってことね。
0302Name_Not_Found
垢版 |
2018/02/11(日) 21:24:49.04ID:???
>>298
でグループ化とは?

>>299
静的に付けたclassが消えるのはいいとしてhasClassどうすんだ?ってなかったっけ?
0303Name_Not_Found
垢版 |
2018/02/11(日) 21:30:40.83ID:???
>>302
> でグループ化とは?

>>208に書いてあるよ
> 値をグループ化できる。複数の値を週類ごとにまとめたものがグループ
> classの場合は値を書くしかないから3つのグループがあって、一つのグループごとに
> 5個の値があれば、最大15個の値を管理する必要が出てくる
> data-*を使えば3つでいい(今は数が多くて管理が大変という話だというのを思い出そう)
> グループと値として管理できるのがメリット
0304Name_Not_Found
垢版 |
2018/02/11(日) 21:31:57.45ID:???
>>302
> 静的に付けたclassが消えるのはいいとしてhasClassどうすんだ?ってなかったっけ?

hasClassって、この場合、blackか?redか?greenか?・・・・その他色々な色か?って
ループでぐるぐる回していま何色か調べるってこと?

そりゃ大変そうだな。
0305Name_Not_Found
垢版 |
2018/02/11(日) 22:57:06.16ID:???
data-*属性をCSSのクラスリストのように使う方法

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
> [attr~=value]
> attr という名前の属性の値が空白区切りの語のリストで、その中の1つが正確に value と一致する要素を表します。

↑属性セレクタとしてこれがあるからできるんじゃないかと思ってみたら、
やっぱりできるもんだなぁ。data-*属性でhasClass相当ってこれでいいでしょ?

https://jsfiddle.net/s9epbv2k/
-------- html
<ul>
 <li data-test="foo bar">1</li>
 <li data-test="foo bar baz">2</li>
 <li data-test="foo baz bar">3</li>
 <li data-test="baz foo bar">4</li>
</ul>

-------- css
[data-test~="baz"] {
color: red;
}

-------- js
$('[data-test~="baz"]').on('click', function() {
 alert($(this).text())
})
$('li').on('click', function() {
 alert($(this).is('[data-test~="baz"]'));
})
0306Name_Not_Found
垢版 |
2018/02/11(日) 23:54:54.27ID:FNzc2dpv
>>269
var hash = {price: 100, size: "L"};

$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}

ほう、price が数値型か。
ためになった
0307Name_Not_Found
垢版 |
2018/02/12(月) 08:28:42.43ID:???
立ち返っていうとですね
data属性を使わなくてもidとclassでどうにでもなることだとなんだけどねw
0308Name_Not_Found
垢版 |
2018/02/12(月) 09:58:07.12ID:???
>>304
全て調べるとは限らないぞ
greenが含まれているか否か、それだけの場合もある
0309Name_Not_Found
垢版 |
2018/02/12(月) 11:13:06.31ID:???
>>305
孫以下はどうするよ?has使うか?回りくどいな
0310Name_Not_Found
垢版 |
2018/02/12(月) 11:16:33.87ID:???
>>309
今はhasClassとの違いだったよね?

まずhasClassはこう書けるというのを示してくんない?
hasClassで孫以下はどうするのよ?


それにしても $(this).is('[data-test~="baz"]') は最強だな
セレクタ使うから、$(this).is('span [data-test~="baz"]')
みたいなことまでできるのが容易に思いつく


hasClassで孫以下はどうするのよ?
0311Name_Not_Found
垢版 |
2018/02/12(月) 15:26:16.07ID:???
セレクタよりなるべくメソッド使いたいもんだな
toggleClassはできそうだが問題は他のライブラリがつけたクラスだな
無視するかはその人次第なのでそうしろとか有り得んわ
0312Name_Not_Found
垢版 |
2018/02/12(月) 17:03:35.60ID:???
> セレクタよりなるべくメソッド使いたいもんだな

お前の好みなんかどうでもいい
0313Name_Not_Found
垢版 |
2018/02/12(月) 17:04:47.81ID:???
> 無視するかはその人次第なのでそうしろとか有り得んわ

無視するかはその人次第なので、
そうしろとか有り得んわ
なんて、お前が決めることではない
0314Name_Not_Found
垢版 |
2018/02/12(月) 17:33:00.27ID:???
そうだな、data-かclassかはお前が決めることではない
0315Name_Not_Found
垢版 |
2018/02/12(月) 17:38:10.80ID:???
単にこの問題に対してdata-*の方が優れているという
ことを論理的に説明しただけ。

これは決まっている事実を公表しただけ
俺が決めたわけじゃない
0316Name_Not_Found
垢版 |
2018/02/12(月) 22:52:55.64ID:???
詳細がわからない以上どっちもどっちだろ
どちらが優れていると確定できるわけがない
上で同じようなこと書いてる人がいたが各々好きにすればいいだけ
0317Name_Not_Found
垢版 |
2018/02/12(月) 23:01:02.40ID:???
>>316
話がごっちゃになってるぞ
最終的に選ぶのが聞いた人であって、
今回の話にdata-*が有利なのは単なる事実だ
0318Name_Not_Found
垢版 |
2018/02/12(月) 23:02:47.41ID:???
もともとclassでやると・・・の管理が面倒って話だからな
最初っからclassでは大変だっていう自覚はあったわけだ
それをどう解決すべきかがわからずclassで頑張ろうとしていただけで

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと
■ このスレッドは過去ログ倉庫に格納されています

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