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/ >>269 var hash = {price: 100, size: "L"}; $('#id').data('value', hash); console.log($('#id').data('value')); // => {price: 100, size: "L"} ほう、price が数値型か。 ためになった 立ち返っていうとですね data属性を使わなくてもidとclassでどうにでもなることだとなんだけどねw >>304 全て調べるとは限らないぞ greenが含まれているか否か、それだけの場合もある >>305 孫以下はどうするよ?has使うか?回りくどいな >>309 今はhasClassとの違いだったよね? まずhasClassはこう書けるというのを示してくんない? hasClassで孫以下はどうするのよ? それにしても $(this).is('[data-test~="baz"]') は最強だな セレクタ使うから、$(this).is('span [data-test~="baz"]') みたいなことまでできるのが容易に思いつく hasClassで孫以下はどうするのよ? セレクタよりなるべくメソッド使いたいもんだな toggleClassはできそうだが問題は他のライブラリがつけたクラスだな 無視するかはその人次第なのでそうしろとか有り得んわ > セレクタよりなるべくメソッド使いたいもんだな お前の好みなんかどうでもいい > 無視するかはその人次第なのでそうしろとか有り得んわ 無視するかはその人次第なので、 そうしろとか有り得んわ なんて、お前が決めることではない そうだな、data-かclassかはお前が決めることではない 単にこの問題に対してdata-*の方が優れているという ことを論理的に説明しただけ。 これは決まっている事実を公表しただけ 俺が決めたわけじゃない 詳細がわからない以上どっちもどっちだろ どちらが優れていると確定できるわけがない 上で同じようなこと書いてる人がいたが各々好きにすればいいだけ >>316 話がごっちゃになってるぞ 最終的に選ぶのが聞いた人であって、 今回の話にdata-*が有利なのは単なる事実だ もともとclassでやると・・・の管理が面倒って話だからな 最初っからclassでは大変だっていう自覚はあったわけだ それをどう解決すべきかがわからずclassで頑張ろうとしていただけで 143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:??? >>142 そうなんだけど・・・の管理が面倒で 変更の度にそこも付け加えなくてはならなくて 最初つけるclassは1,2個と少ないので楽かなと data-でもそれはそれで面倒な点があるかもしれんだろうに 解決策は最初からほぼわかってた ただ確信が持てないので聞いただけだろ >とするのはあり? かも知れないなら、まず最初に質問者に聞くべきだな 自分の想像で、問題あるという前提で話をするのはやめろ 仕様がこれ以上変わらないなら答えは「あり」 業務アプリ作ってんじゃねーんだぞアホらしい > 140 > .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく > $('.aaa').removeClass('bbb ccc ddd・・・'); > を $('.aaa').removeClass().addClass('aaa'); > とするのはあり? > 142 > >>140 > それだと静的に付けたclassまで消えちゃうじゃん > 143 > >>142 > そうなんだけど・・・の管理が面倒で > 変更の度にそこも付け加えなくてはならなくて > 最初つけるclassは1,2個と少ないので楽かなと この一連の流れから明らかだな。 静的に付けたclassまで消えるのが問題だと認識してる。 >>321 > 仕様がこれ以上変わらないなら答えは「あり」 何言ってんだ? removeClassが消えるのは嫌だけど・・・が面倒だって話だろ ならもっといい方法がないか探してるってことだよ はっきりさせておこう。 この例では、classを使うよりdata-*属性を使ったほうが良い ここまではみんなOKだよな ということは、あとはclassを使うか、data-*を使うかは 質問者が選ぶことだ。 回答者としては、質問者へ回答を書くのみ classを使った案とdata-*を使った優れた案がでた この段階でclassを押し付けるのはおかしい 質問者の >>140 と >>142 から > .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく ということにたいして > $('.aaa').removeClass().addClass('aaa'); という回答は 静的に付けたclassが消えるという問題があると 質問者と回答の双方が認識しているわけだ 問題があると認識してる時点で この質問は「なしだけどしかたないのかなぁ」という話に変わったわけだ もし静的に付けたclassが消えてもいいというのなら >>143 は「静的に付けたclassが消えても問題ないです」とい レスになっていただろう。 だが>143は、消えちゃうんだけど(それを避けようとすると)・・・の管理が面倒になる という話をしているわけだ。 この流れで、もっと良い案、data-*属性を使ったやり方が出るのは当然だろう >>323 >removeClassが消えるのは嫌 捏造しないように むしろいいかもしれんぞ 捏造も何もちゃんと書いてあるじゃん > 142 > >>140 > それだと静的に付けたclassまで消えちゃうじゃん > 143 > >>142 > そうなんだけど・・・の管理が面倒で みなさんいろいろすみません>>140 です こういうの書くと成りすましに見られるから控えていたのですが >>328 静的に付けたclassは消えても問題ないです ただのセレクタ役だし、またつければいいだけで >>331 > ただのセレクタ役だし、またつければいいだけで ただのセレクタ役とは? またつければいいというのは、どうやって? >>332 こういうのがいるから後から書きづらくなるんだよな スレに悪影響以外何者でもない >>334 出てるじゃん >>330 嫌と書いてないのを君が証明してどうするよw >>326 押し付けてるアンカよろ どっちでもいいは幾つかあるが >>335 でてるじゃんじゃなくて、 どこにでてるのかって話だ >>334 で、ただのセレクタ役とは? またつければいいというのは、どうやって? どっちを使えとか押し付けてはいないな。 ただこの場合はdata-*属性を使ったほうが シンプルに実装できるってだけの話だ 確かにいままで出た条件の範囲では data-*属性のほうが良いかもしれないけど もしかしたら、明らかになってない条件の中に data-*属性じゃだめな理由があるかもしれないだろ! お願いだ。それを誰か書いてくれ このままじゃ負ける なりすましするなら最後まで本人になりきって 質問に答えなきゃだめだろw 中途半端なことをするから余計怪しまれる >>140 > $('.aaa').removeClass().addClass('aaa'); > とするのはあり? '.aaa'というセレクタで指定していることから静的に 追加したclassを変更する意図とケースは無いと見られる 後から追加されたclassNameは必ず後に追加されるので >>144 で答えは出ていると思うけどね >>344 条件次第だけどそうだと思うけどね? jQueryでも古いバージョンにはセレクタのプロパティーがあったんだよね 最近のバージョンではなくなっているけど $('.aaa').selector // '.aaa' これを活用してインスタンスメソッドを作成しておくってこともできたんだけど 何こいつ問題あるかないかにこだわってるんだろう しかも質問者じゃない人のレスで満足して。 誰かに問題ありませんって言ってほしいだけかよw 承認欲求ってやつだな >>343 > '.aaa'というセレクタで指定していることから静的に > 追加したclassを変更する意図とケースは無いと見られる 静的に追加したclassっていうのを誤解してるんじゃね? JavaScriptで追加したものじゃなくて、HTMLに書かれた classって意味だよ。デザインの都合で。 JavaScriptの役目としては、コードで付けたもの以外は そのまま残しておく。だからremoveClassで全部消えちゃうのは まずいわけ >>345 > これを活用してインスタンスメソッドを作成しておくってこともできたんだけど こっちはまったく意味不明。何がしたいのかさっぱりわからない。 >>347 >>144 だと全部消えないだろ? あくまで静的なclassNameは'aaa'での条件 質問の条件に対してことだよ 自己解釈しているのはアンタの方だろ?w >>348 これは以前のjQueryにおいてのこと >>349 だから.aaa以外の静的に付けたものは消えるじゃん それにそのコードだとaaaが2番目以降に来ると問題が有るし > 最初つけるclassは1,2個と少ないので楽かなと と書いてある通り、1個とは限らないしね >>349 > これは以前のjQueryにおいてのこと だから以前のjQueryだからって何なんだって話だ jQuery 1.9.1で実行してみたが、 このように.aaaしか取れない それで何がしたいのか <span class="btn aaa">span</span> alert($('.aaa').selector); // .aaa >>350 >>140 にはそんなことは書いていないだろ?w 最後に.addClass('aaa')で完結している >>352 セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド >>353 >>143 に書いてあるだろ 勝手に完結させんな 143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:??? >>142 そうなんだけど・・・の管理が面倒で 変更の度にそこも付け加えなくてはならなくて 最初つけるclassは1,2個と少ないので楽かなと >>354 > セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド だから、<span class="btn aaa">span</span> aaaを参照して静的に書かれたbtnまで削除してしまう 使えないメソッドですねって言ってんだよw そもそもselectorを使うってセンス悪いわ セレクタがIDだったらどうするんだ? セレクタが属性セレクタだったらどうするだ? カンマで区切られた複数のセレクタだったら、 親子セレクタ、隣接セレクタだったら? セレクタがクラスの場合に限り、セレクタに 一致するものを除いて削除するメソッドとか 設計的に気持ち悪い。selectorなくして正解だったな >>357 お前らって本当に頭悪いよな余計なことを妄想しすぎ >>140 の回答はだな $('.aaa').attr('class', 'aaa'); これで良いんだよ バカ >>356 > $('.aaa').removeClass().addClass('aaa'); この結果から他にclassが存在しないだろ バカ >>140 で話終わってないだろ 143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:??? >>142 そうなんだけど・・・の管理が面倒で 変更の度にそこも付け加えなくてはならなくて 最初つけるclassは1,2個と少ないので楽かなと > 最初つけるclassは1,2個と少ないので楽かなと と書いてある通り、最初につけるclassは.aaaだけとは 限らないことが判明している。 つまり本当はこう言っているわけだ $('.aaa').removeClass('bbb ccc ddd・・・'); を $('.aaa').removeClass().addClass('aaa ・・・'); 後者のほうが数が少なくてまだマシということだが、 両方ともやりたくないのは>>143 からわかるだろう (だからこそ>>140 しか見ないようにしてるのだろうが) この2つの・・・の管理をしなくて済むのが data-*属性を使ったやり方なわけだよ >>358 それだと.aaaにデザインの都合で新たなクラスを 追加した時に、そのクラスまで消えてしまいますよね それを避けるにはどうしたら良いのでしょうか? なおデザイン側で追加されるクラスはわからないものとします >>362 あくまでも>>140 の質問に対して率直に回答 結果としては < (elment) class="aaa" ...> にしたいということでしかない それは質問に対しての回答ではなく、与太話でしかない 完結でしょ? >>361 $('.aaa').removeClass().addClass('aaa'); と $('.aaa').removeClass().addClass('aaa ・・・'); でhは全く結果が違うし、解釈も違うことが理解できないみたいだねw >>363 ここは質問スレです。私の質問に答えてください >>364 > 最初つけるclassは1,2個と少ないので楽かなと 「最初つけるclassは1,2個」の意味を考えましょう $('.aaa').removeClass().addClass('aaa'); 最初につけるclassが2個だとして、これのどこにそれが書いてありますか? >>366 $('.aaa').removeClass().addClass('aaa'); ↑ これのどこに最初のclassの数云々考える必要があるの? 結果は class="aaa" しかあり得ないだろw >>361 がclassが複数あるとか質問に沿わない自己解釈しているから言ってるだけ なんで必死に絡んでくるのか意味不明 $().addClass('aaa'); とかしたら jQueryが「classNameはaaa以外にありませんか?」とか一々聞いてくるのかよw 「最初つけるclassは1,2個」の意味を考えましょう 質問を見れば最後は"aaa"のみで完結してるじゃん これ以上でも以下でもないと思うが外野の勝手な連想で ただ意味をこじ付けているだけにしか見えない 学校で先生に問題はよく読みなさいと教わらなかったのかな? >>140 > .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく > $('.aaa').removeClass('bbb ccc ddd・・・'); > を > $('.aaa').removeClass().addClass('aaa'); > とするのはあり? >>361 両方ともやりたくないとは言ってないよ やりたいことは $('.aaa').removeClass().addClass('aaa'); または $('.aaa').removeClass().addClass('aaa bbb'); つまりccc ddd・・・を消したいと >>332 そういうの荒れるからやめてくれ、マジで ここ参考になるのに もーめんどくせーから $(function () { $(".aaa").each(function () { $(this).data("originalClass", $(this).attr("class")); }); } して、必要に応じて $(".aaa").each(function () { $(this).attr("class", $(this).data("originalClass")); }); するとかw >>372 $('.aaa').attr('class', 'aaa'); または $('.aaa').attr('class', 'aaa bbb'); いわゆる初期化だろw >>372 > やりたいことは > $('.aaa').removeClass().addClass('aaa'); または > $('.aaa').removeClass().addClass('aaa bbb'); > > つまりccc ddd・・・を消したいと $('.aaa').text('').text('aaa bbb'); こんなことやりたいの? >>370 ほんとそう思う 自分目線でこうあるべきと勝手に進めてるのが一部 >370 > 質問を見れば最後は"aaa"のみで完結してるじゃん あんたの言う最後は>>140 のことかな? >>143 でこう言ってるのは無視してるのかな? > そうなんだけど・・・の管理が面倒で > 変更の度にそこも付け加えなくてはならなくて > 最初つけるclassは1,2個と少ないので楽かなと >>379 > >>370 は問題を最後まで読まないやつだなw その通り $('.aaa').attr('class', 'aaa'); or $('.aaa').attr('class', 'aaa bbb'); これが理にかなってると思う >>383 ただそれだとデザインの都合で 別のクラスが追加された時に メンテナンスが必要になるんですよね どうにかなりませんか? >>384 > $('.aaa').removeClass().addClass('aaa'); または > $('.aaa').removeClass().addClass('aaa bbb'); これをやるなら>>383 の方がスマートで理論的と俺は見た 理由は最終的には'aaa'(単一)か'aaa bbb'(複数)のクラス名に意図的に置き換えるから 基本に数値にしても結果がわかっているなら num = 10 で良い、無理に nam = x + y などは不要 これはどんな言語でも同じこと >>385 デザインの都合でっていう話は完全無視? <span class="aaa"> とあって、 デザイナーが この部分フォント大きくしたいなとか思って <span class="aaa hoge"> みたいに変更すると JavaScriptのコードの変更まで必要になってしまうんだよ 他にもclassってことは複数のaaaがあることが想定されるが 一つは <span class="aaa hoge"> 、もう一つは <span class="aaa hage"> だったりしたら、困るだろ HTMLはプログラマとデザイナで共有している所だから お互いに相手に影響を与えないようにしないといけない >>386 お互いに相手に影響を与えないようにしないといけないんだったら 気軽にお互いがsourceを都合で勝手に変えるもんじゃないだろw 共有しているのなら連携して修正しないとね >>387 連携っていうのは、受け渡しの部分を最小限にして お互い独立して作業ができるようにすることだぞ 何もかもがお互いに影響していたら 連携というより相手の作業を邪魔することにしかならない 影響を受けないように気をつけて作るのが仕事なんじゃないでしょうか・・ そうだね。だからデザイナーがclassに付け足しても コードは影響がないように作るって話なんだよ やっとそこ(自分の担当外の仕事)まで考えられる人がでてきたか >>386 インスタンスメソッドぐらい作成しろよ 静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ? $('$.fn.extend({ restoreClass: function () { let arr = []; $(this).attr('class').split(' ').map(function (a, b, c) { a.indexOf('org-') !== -1 ? arr.push(a) : void 0; }); return $(this).attr('class', arr.join(' ')); } }); $('.org-aaa').restoreClass(); 誤:$('$.fn.extend({ 正:$.fn.extend({ >>391 > 静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ? > それは俺が>>210 で提示したやり方ですね? そんなコードを書くのが無駄だと言ったコードを わざわざ書くとはw > としなければいけなくなるということ > そして、色やサイズのパターンが増えたらどうすんの?ということ > > ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って > そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw > > whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw >>393 デザインの都合でで使うクラス名の管理はデザイナーのお仕事ですw >>391 それから、それ気持ち悪いコードですね。 インスタンスメソッドというから何かと思えば jQueryプラグインですか? ならjQueryプラグインの書き方で書きましょうよw なってない。手本を見せてあげましょうか? それからほれjQueryプラグインの作り方 https://learn.jquery.com/plugins/basic-plugin-creation/ >>394 はい?ですのでデザイナーに任せてデザイナーが 何をしようとコードには影響を受けないようにすべきですね。 じゃ、自由に任意の文字列を投げるようにしたらいいんじゃないの?w $.fn.extend({ restoreClass: function (str) { let arr = []; $(this).attr('class').split(' ').map(function (a, b, c) { a.indexOf(str) !== -1 ? arr.push(a) : void 0; }); return $(this).attr('class', arr.join(' ')); } }); $('.org-aaa').restoreClass('org-'); >>391 まず先にバグを指摘しておきますね org-bbb が org-aaa に変わってしまいます。 <span class="org-aaa">span</span> <span class="org-bbb">span</span> ↓ $('.org-aaa, .org-bbb').restoreClass(); ↓ <span class="org-aaa">span</span> <span class="org-aaa">span</span> >>397 俺ならこうするなぁ。まdata-*属性使いたくないんでしょw もしくは最初の初期化時にdata()メソッドで初期クラスを保存するとかね <span class="aaa" data-original-class="aaa">span</span> >>399 それそれ、人の意図だからそれで良いと思うよ data属性はあくまで適切な属性や要素がない場合を想定したものなので classで賄えるんだから俺はclassを使用することを推薦するよ >>398 それはね、Bugといよりそのケースには未対応ってことなんだよ サクッとインスタンスメソッドを作っただけなのでそれは筋違い あ、はい、バグだと指摘されたら「仕様です」ですねw はい、まともなコードに直してあげましたよw 古いIEでも動くように考慮してます。 $.fn.restoreClass = function () { return this.each(function() { var classes = this.className.split(' '); var className = $.grep(classes, function() { return this.indexOf('org-') === 0; }).join(' '); this.className = className; }); }; $('.org-aaa, .org-bbb').restoreClass(); ごめん、訂正w $.fn.restoreClass = function () { return this.each(function() { var classes = this.className.split(' '); var className = $.grep(classes, function(c) { return c.indexOf('org-') === 0; }).join(' '); this.className = className; }); }; $('.org-aaa, .org-bbb').restoreClass(); そして、最新のブラウザだけで動けば良いコード $.fn.restoreClass = function () { return this.each(function() { let classes = $.grep(this.classList, c => c.startsWith('org-')); this.className = classes.join(' '); }); }; $('.org-aaa, .org-bbb').restoreClass(); ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.5.1 2024/04/28 Walang Kapalit ★ | Donguri System Team 5ちゃんねる