jQuery 質問スレッド vol.8
■ このスレッドは過去ログ倉庫に格納されています
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/ 妄想とは>>161 などな。 すでに論点完全に外れてるからな。 >>171 ヒントだけってのは俺だがわざわざ書くまでもなく容易に想像できるだろうよ 条件1→aaaの一部の状態を変化(aaa) 条件2→aaaの一部の状態を変化(bbb) 条件3→aaaの一部の状態を変化(ccc) 条件は単なるifだけじゃないぞ ユーザ入力や関数などな >>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以外でスペース区切りで値を入れるものなんてないでしょ?) だれか >>176 が言ってることを 説明できる人いる? >>177 >>140 の質問に対しては>>174 の通り解決している 根本的に受け答えの問題で質問の主旨を理解しよう 【悲報】現在自演中の>>141 さん、質問主の>>140 からは完全に無視されていたwwwww >>178 なるほどな、それがわからないからわけわからん書き込みが湧いてるのだな 説明も何もそのままだぞ 逆に何がわからないのか聞けばいい やっぱり>>176 が言ってることを説明できない=意味不明だから誰も理解できなかったようだね 理解できてる人もいるのに誰もとはいかに 大雑把な例えだが 役員だけaに変える、新入社員だけbに変える、女性社員だけcに変える 新入社員で女性社員はbとcになる はぁ? 説明できる人いる?って聞いただろ 誰も答えてないのになんでいると証明できる? >>183 でわからないならそれでいいんじゃない 誰も困らないから >>183 関係ないけどそんな仕事したなあ 新入社員の名前は明るい緑で、女性の名前は明るい赤でっていわれて じゃあ女性の新入社員の名前の色はどちらにしますかってきいたら 話きいてた? 明るい緑と明るい赤に決まってるでしょ? >>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(ほげ)のほげの種類がたくさん増えて困ってるっていうのが 今の話題だって言ってる >>186 あるある ちなみに補足しておくと以下の場合も考えられる 上書きで後者指定優先(あまりすすまないが) 全て色とは限らず、色形位置などかぶらない状態 全て色でもその社員の同じ位置とは限らない 顔胴体背景、更に擬似要素で別部分 >>188 data-とは話は分岐されている というかアンカ追え アンカ? こんな感じだろ 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 が言ってることを説明できない=意味不明だから誰も理解できなかったようだね アンカたどればわかるが、 結局のところ一つの要素に、そんなにクラスを 設定する必要があるってのがそもそも間違いなんだよ。 一つのclassにいろんな属性をごちゃ混ぜでぶち込むから 管理できなくなってるんだろうが。 data-*を使って属性の種類ごとに分ければ良い 異なった属性を全部classに入れるな >>191 >一つのclassにいろんな属性をごちゃ混ぜでぶち込む どれのこと? >>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個と少ないので楽かなと $('.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の値がたくさん増えることになり管理が面倒になる >>190 だろっていちいち書くなよ、うざいな 専ブラ使ってないのか? >>195 5ちゃんねるの使い方の話は、別件だからおいておこうか? >>194 全然面倒ではないが何か? こういう案件自体はあるだろ > 全然面倒ではないが何か? 質問者が面倒だって言ってるのに 何を言ってるんだおまえは? >>176 がわからない→例え>>183 やってしまったもなにもないわな アンカで追えてないのか話が混ざってる気がする >>193 それは見てますよ それのどこが一つのclassになのでしょうか? >>199 それ俺が書いたんだけど? 質問者が面倒だって言ってるから、 俺がclassに複数の異なった属性を入れるのがいけないと指摘した 異なった属性を混ぜ込まなければclassにそんなに多くのものを入れることはない 「一つの要素にJavaScriptからそんなに多くのクラスを 設定する必要が有ることがそもそも間違ってる」 最初から質問者に対してそう指摘している で、おまえは誰?何をやった? >>201 > それのどこが一つのclassになのでしょうか? 一つの要素にclass属性は"一つ"しかありませんよw data-*属性はいくつでも作れますがね >>203 >>194 に”複数の異なった属性を一つのclassに入れてしまう”と? ついでに質問いいすか? >>188 はdataメソッドでなくattrメソッドで変えるということでしょうか? リセットするときどうするのでしょうか? もし各data-*ごとに消すならaddClassとさほど変わらない気がしますが それもだが上に出てたライブラリで勝手に〜はどうするんだろうな むろんdata-*を否定するわけではないが >>188 >>143 で「変更の度にそこも付け加えなくてはならなくて面倒」とある。 >>188 でどう解決するのか。 同じく聞きたい。 >>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の値でも一緒の話だし名前の付け方を工夫すればよい >>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の値に特殊な名前つけルールを作って そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw ちなみに初期値に設定するのは $("#id").attr(resetValue) だけでいいで? attrはハッシュ値を受け付けるからよ >>208 グループも何も静的1個(または2個)で済む方法がある>>140 >>142 のことはスッキリしない人がいるかもしれんだろうが>>141 ならそれでいいんじゃね >>141 の「ええよ」は、その一つ前のレスの質問者(>>140 )へのレスであって >>142 の問題があるけどどうする?に対する「ええよ」じゃないぞ?(時系列注意) というか、 >>142で > それだと静的に付けたclassまで消えちゃうじゃん という指摘にたいして > そうなんだけど・・・の管理が面倒で > 変更の度にそこも付け加えなくてはならなくて > 最初つけるclassは1,2個と少ないので楽かなと って悩んだ挙句の妥協案じゃんw それからもっといい案(data-*)が出てるわけでしょ ほんと時系列注意なw んなこたわかってる そもそも>>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 もっといいやり方がありますか? という質問は見当たらないけどw (9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。 ○○なことをしたいのですが、いいやり方はないでしょうか? この質問に対して「ある」「ない」以外に答えはない その寄せられた「意見」に対して「不評な意見」が出てるんだよw どうして「不評な意見」が出るのか? ズバリこれねw >>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() は単なるメソッドチェーンなんだから否定するのはおかしい ただの主観に過ぎない 苦しいなぁw 頑張ればできると言ってるだけで やりづらいだけじゃねーか >>219 詳しくありがとう でもdata-○○○の○○○は持つ必要があるし(たぶん) >しなければいけなくなる 理由がいまいちピンときません それとdata-*でtoggleClassしたい場合どうするのでしょうか? >>234 toggleClass使いたいならclass使えば良いんじゃね? 上の流れと別件として、読んでで気になったので >>167 の、HTML5違反をして、独自属性をつけるって話?の箇所 data-hogeでなく HTML <tag hoge=値> CSS [hoge] {} jq attr('hoge', '値') は違反ってことですか? そのソース(原文)を知りたいです >>238 このタイミングでそういうレスをした意図がわからないが、 一応言っておくと今回の話題ににはそれが使えない class="a foo" やclass="a bar" とあるとき、 一発で class="a baz" にすることはできないから HTML で、使えるタグ名・属性名は、決まっているだろ タグ名の所に、そのタグ内で使える、属性名が書いてあるはず >>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使ってんの?ってこと >>247 それ好きにすりゃいいレベルの例じゃね? こんなんまでこっちはまちがいーこっちにしろーとか押し付けられんの?w 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には大幅なさをつけられており取って代わるのは いつになるのか動向が注目される >>245 > なにそのくそ仕様誰得なの? もともとdata-*属性なんてなかった jQueryのdataの方が先に作られた jQueryのdataはdata-*属性を書き換えるものじゃない。 メモリの中に要素に関連づいたデータを持たせるためのもの だからdata-*属性ではもたせられないようなオブジェクトでも持たせられる data-*は属性はjQueryのdataの初期値としても使われるってだけの話 そしてdata-*属性は、属性なのだからattrメソッドで操作すれば良い >>247 > 何のためにjQuery使ってんの?ってこと jQueryオブジェクトのためだよ 別にdataメソッドのためじゃない >>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の場合、属性として読み書きすることが少ないってだけ >>251 大変勉強になりました。くそ仕様とか言ってごめんなさいm(_ _)m >>253 >>247 はそんなことを言ってるんじゃないだろ? $(el).css('color', 'red'); $(el).hover( function(){ $(this).attr('style', 'color: blue;'); }, function(){ $(this).attr('style', 'color: red;');} ); なんてやらないだろ?ってことだろ >>255 だって、それだとstyleについているかも知れない color以外のものまで変わってしまうじゃん そういう将来的に不具合の元になるような ことはやらないよ。それが>>253 に書いて有ることだよ >>256 attr()は単なる文字列操作 css()はハッシュ関数で値を操作できる どちらが有利かということだろ >>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() 使う目的が違っている >>251 >data-*属性ではもたせられないようなオブジェクト とは例えば何でしょうか? {'plice': '100', 'size': 'L'} のようなオブジェクトならattrメソッドで取得設定できるが関数とかかな? >>258 ハッシュ(値) → 値 属性(名称) → 文字列 これだけのこと >>259 それ、もたせられないよ。 どの要素にも有るグローバル属性のtitleを使って $('#id').attr('title', {'plice': '100', 'size': 'L'} ); console.log($('#id').attr('title')); これで試してみ、 [object Object] という文字列になってしまう JavaScriptのオブジェクトは、文字列ではないので属性値として使えないからね (正確には強制的にtoString()が呼び出され文字列に変換してしまう) >>260 >>258 で反論してることを一切無視して 話を戻そうとしても無駄w お前が言ったそれが間違っていることは>>258 に書いた。 それに対して無視すること自体が お前が間違ってることをお前自身で認めたようなもんだよw >>261 なんで変えてるのでしょうか そりゃtitleには入れられないでしょうからそれならこれで $('#id').attr({title,: 'hoge', target: '_blank'}); ようは $(el).attr('style', 'color: red; background-color: black;'); なんてしないし $(el).css({'color': 'red', 'background-color': 'black'}); は更に(最終的によほどでないと)しないし、style持ち出すのは話別なんじゃないの、と >>263 > $('#id').attr({title,: 'hoge', target: '_blank'}); それは、title属性にhogeという文字列を入れる target属性に_blankという文字列を入れるという意味で 入れてるのは文字列になってる 俺は属性にオブジェクト入れられないって言ってるの 少しは頭使ったら? それ言ったらこれもだから?だな >入れてるのは文字列になってる >俺は属性にオブジェクト入れられない つーか、やってみればわかるのにな 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 >>268 attrでは属性にオブジェクトは入れられないよ >>269 で証明済み でそのdata-*やら属性やらが「classよりいい」と関係してるのかね? toggleClassや他のclassの削除はスルーなんかな それはJSONを使ってオブジェクトを文字列にすればって意味なので 属性にオブジェクトを入れてることにはならない 加えてJSON文字列に文字列化(シリアライズ)できないものや 情報が失われてしまうものがオブジェクトに 含まれている場合にもやっぱり対応できない 例えば関数とか日付型とかDOM要素とか。 JSONを拡張して頑張れば、少しはましになるかもしれないけど DOM要素のシリアライズとかまず無理だろうね >>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よりいい」と言ってる ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.4 2024/05/19 Walang Kapalit ★ | Donguri System Team 5ちゃんねる