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/ >>121 そういうのタッチデバイスで意味ないから >>131 そういうユーザ操作ひっくるめてUIでないの? >>125 Electron を使えば? Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう 野口 将人・倉見 洋輔、2017 この本を読めば? Electronでふと思い出したがVisualstudio codeって使い心地どうすか 俺が描くのってHTMLCSSjQueryだけなんだけど >>137 起動がやや重い(Atomよりはマシ)が起動後はスムーズで悪くない VS Code で、Windows で、Ruby も楽々。 コンソール画面には、PowerShell Emmet, SASS, MD やら、これが無料で、笑いが止まらない www 【Microsoft Tech Summit】APP017 PowerShellの新しい相棒 Visual Studio Code https://www.youtube.com/watch?v=0zo6z0yHrGk .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく $('.aaa').removeClass('bbb ccc ddd・・・'); を $('.aaa').removeClass().addClass('aaa'); とするのはあり? >>140 それだと静的に付けたclassまで消えちゃうじゃん >>142 そうなんだけど・・・の管理が面倒で 変更の度にそこも付け加えなくてはならなくて 最初つけるclassは1,2個と少ないので楽かなと >>143 $('.aaa').removeClass(function(i, v){ return v.split(' ').slice(1).join(' '); }); こういう感じでもええんやで 一つの要素にJavaScriptからそんなに多くのクラスを 設定する必要が有ることがそもそも間違ってる >>144 aaaが必ずしも最初に来る保証がない場合は?↓とか >>145 UI含めてライブラリで勝手に付けられたりするからな >>147 ただ記事やブログ書いてるだけならそんないらんよ ちょっと特殊な場合だな ヒントだけ書くとスポーツやトラフィックや・・・ >>148 ライブラリで勝手につけられると言っても せいぜいbootstrapみたいに btn btn-primary btn-lg active ぐらいなもんだろ? 一つの要素に4つとかそのぐらいの数しかいらない これもbootstrapのCSSの設計上これだけいるってだけで、 JavaScriptから設定するクラスだとやっぱりそんなにいらないと思う まあ推測するに <div data-state="a"></div> <div data-state="b"></div> <div data-state="c"></div> <div data-state="d"></div> みたいにやればいいのに、classで <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> こんな風にやろうとしてるんでしょ? だからe, f, g が増えたらリセットするために、e, f, gのクラスを消すように メンテナンスしなくちゃいけない!ってなってるんだと思うよ。 つまりやっぱり使い方が間違ってる。 前者のやり方であれば、当然data-stateを初期値に戻すだけでいい 管理が大変って今どうやってて何が大変なのか分からん。 var myTags = 'bbb ccc ddd'; で管理して $('.aaa').addClass(myTags); $('.aaa').removeClass(myTags); $('.aaa').toggleClass(myTags); とか普通に使うんじゃダメなの? >>153 myTagsをその都度変えるということ? data-はクセあるからな キャッシュの問題 CSSに反映されない $.hasDataはイベント有無で変わる classの方が楽で自然に書ける場合はある >>153 すでにbbbがあるか否かの判断がめんどくさくね? 質問はランダムに動的に追加されるclassだけを削除する方法 dataなんて言ってないだろ?w >>157 どうでもよくね? <div class="aaa ccc ddd" /> に $('.aaa').removeClass('bbb ccc ddd'); しても <div class="aaa" /> になるだけだろ?え、俺なんか勘違いしてる?? >>156 なんか勘違いしてね? jQueryのdataじゃなくて data-x属性だぞ 普通にCSSで使える [data-name=value]とか書けばいい .red-text { color: red } .red-background { background-color: red } とかしてるんじゃないの? まあ使いかたが悪いってことだよね >>156 あとdata()前後とかな >>160 ならdata-はいらんがな >>159 上にもあったがライブラリのクラスはそれを書かなくてはならない。 つまり仕様が変わると変えなくてはならない。 これは将来的に面倒な要素を残すことになる。 また、仕様変更でeeeが加わった場合にそこも書き直さなくてはならない。 >>140 なら自分の初期設定したいクラスだけ書けばいい。 >>163 静的クラスのほうの仕様は変わらない前提?ならいいんじゃない >>161 2個ならず多い場合に、個別に設定=変更する場合ならありじゃないの? 背景色だけ変えるとか 勝手な憶測書いてそれ前提で否定する人って何が目的なんだろ >>162 > ならdata-はいらんがな HTML5違反をして、独自属性をつけるって話? そりゃそれならいらんだろうなw だがそこは論点じゃない classではなく独自の属性を使えという話 classを使うと「値のリスト」にしかならない。classという名前は固定 だからclassに自分の知らない値が入ることを考慮する必要が出てくる 独自属性の場合、「独自属性とその値」になる 独自属性には自分の知らない値は入らないので、classを使うよりも 取扱が簡単になる >>166 推測しかできないような 中途半端な書き込みをするなってことだろw >>161 横レスだが何が言いたいのかはっきり書いてくれないかな それだといくつかに取れる >>168 なら手順的には先ず尋ねるべきだな >>169 > 横レスだが何が言いたいのかはっきり書いてくれないかな クラス名 = スタイル になっているということだよ >>169 > なら手順的には先ず尋ねるべきだな 尋ねる前にヒントだけしかかかないような書き込みしてるだろ >>151 > ヒントだけ書くとスポーツやトラフィックや・・・ ヒントしか言わないやつは推測で答えられても文句は言わない >>167 classは、すべての要素に対して使用することが出来る「分類名」 data-は、htmlの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」 勘違いするなよw >>168 どう中途半端? >>140 こういう書き方はあり?(yes|no?) >>141 yes 単純明快、しかもすでに解決済み。 横から妄想書いてるのがゴチャゴチャ言ってるだけでは。 妄想とは>>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() は単なるメソッドチェーンなんだから否定するのはおかしい ただの主観に過ぎない ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.5 2024/06/08 Walang Kapalit ★ | Donguri System Team 5ちゃんねる