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/ >>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(); 別解 $.fn.restoreClass = function () { return this.attr('class', function() { let classes = $.grep(this.classList, c => c.startsWith('org-')); return classes.join(' '); }); }; $('.org-aaa, .org-bbb').restoreClass(); >>406 のように特定の条件(わかるかな?w)を満たせば extendでもできなくはないですがね。 $.fn.extend({ restoreClass: function () { return this.attr('class', function() { let classes = $.grep(this.classList, c => c.startsWith('org-')); return classes.join(' '); }); } }); $('.org-aaa, .org-bbb').restoreClass(); >>401 > それはね、Bugといよりそのケースには未対応ってことなんだよ jQueryのプラグインの形式として使えるくせに、 jQueryで使えるセレクタを使ったら正しく動かないのはバグだよ それなら関数にしたほうがまだマシ data-*属性使えばシンプルに解決できる問題なのに、変な仕組みを作って コードを書いたのは良いが、バグありで map使ってるくせに戻り値を利用せず、条件に応じてpushかするような コードを書くようじゃぁ、まだまだ初心者ですね。考え方もコードも ┐(´ー`)┌ヤレヤレ 建設的なレスをしないのに限ってああだこうだ言うんだよね >>409 class名できることをdata-*属性の方がシンプルだとか頭悪そうだよな ワロタ jQuery 仮想質問に答えて罵るスレッド この方がこのスレに合ってると思う >>411 > class名できることをdata-*属性の方がシンプルだとか頭悪そうだよな まあ実際見てみれば明らかだよ >>274 にも書いたけど <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"}) これだけで終わり > .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく という流れで、 .removeClass()を使う時点で、おかしいと感じないとダメ ・・・はどうなっとるんじゃ?と > そうなんだけど・・・の管理が面倒で > 変更の度にそこも付け加えなくてはならなくて > 最初つけるclassは1,2個と少ないので楽かなと 聞いてみたら↑案の定こういうレスが返ってきたわけで、 使い方間違ってるなーという話さ >>408 ツッコミどころをわざと作ってやってんだよ その方が楽しいだろ? 案の定、必死に噛み付いて来てるしw >>413 > $(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり コーヒー噴いたじゃないかよwww それってね結局はこれと一緒 $(…).css({"color": "red", "font-size": "large"}) 単にプロパティーを変更しているだけなんだけどw 脳内で満足してるだけ >>416 いや、服の色が赤で、サイズがLって意味だけど? MとかLとかSとかLLで気づかないかね? >>383 動的にということだから他の部分でも〜Classメソッド使ってると思われ その流れでremove/addClassの方が自然なような >>413 それtoggleClassは?在庫有無だけとか >>420 だからclassを使うのが間違ってるわけだから そもそもtoggleClassもいらんのだよ。 単にdata-*属性に値を入れるだけ data-zaiko=true data-zaiko=false とかね >>421 間違っていることはないよ どちらを使っても良いんだよ 脳内の問題 classっていうのは種類って意味だよ。 一つの要素がそんなに複数の種類になることなんてない。 通常は種類は一種類。OOCSSなんかは複数のスタイルで 継承関係を表しているだけで種類は一種類 activeとかdisableなんてのも本来はclassの用途としては 間違っている。実際input要素とかは別の属性だしね 悪影響がないならclassを使ってもいいけど 真偽値のみに留めておくのが良い やりにくくなったらdata-*属性を使ったほうが良い 継承関係を表しているだけで種類は一種類? class="dog male" class="cat female" 種と性別はどっちがどっちを継承してるの? 本来はclassの用途としては間違っているってdata-の仕様が出来るまではみんな間違ってたってこと? > 種と性別はどっちがどっちを継承してるの? 自分で書いてるじゃん。 class=種類は「種」だよ。 性別は属性 人間ならmaleとfemaleと見ただけで、それが性別であることはわかるだろうけど、 コンピュータから見れば、わからないからね。 各順番を片方逆にしていたら、 class="dog male" class="female cat" 片方は dog で片方は female という種なんだと 認識してもおかしくない これがプログラミング言語であれば、 var class = "male" なんてコードは書かないだろう 性別は属性って言ったって、data-できる前<div sex="female">と書いていたのか? class使ってたんじゃないの?本来野郎はそこ説明しろよ。 >>429 昔classしか選択肢がない状況でclass使っていたからってなんだっていうのだろうか? 昔の話をするならば、IE6は複数のクラスを指定しても最後の一つしか認識しないバグが有るし http://css-eblog.com/ie-css-problems/box.html IE4、NN4の時代にはクラスには一つしか指定できなかった http://www.tohoho-web.com/lng/200002/00020242.htm HTML3.2だとそもそもclassが存在しなかった https://qiita.com/anchoor/items/02e4af0f630f5f9b2470 昔の仕様を持ち出してきて、昔はclass使っていなかっただろ!とか 一つしか指定してなかっただろ!とか言うことに何か意味があるのか? >>424 class属性は種類というより部類。例えば、aaa と bbb と ccc という種類がある 'aaa ccc' or 'bbb ccc' は種類によって分けた部類となる HTMLは論理要素は意味を持つが物理要素は外見だけなので何の意味もなく 個々の意図でしかない classify分類する classification分類 class = ??? ここ面白いな、。次のスレタイはこれで。 質問者の質問を元に自分で勝手に変更解釈して自分で答えを書くスレ。 まだやっていたのか 静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる WeakMapを使えば良いだけ >>437 ちがうよ 質問をお題に知識をひけらかしてマウントとるスレ だろ >>438 まだやってるのはお前だけdata-*属性を使うことに対して異論は出てない 更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい ということだろうから、data-*属性ならば属性セレクタで対応は可能だが WeakMapを使った場合は実現できない <ul class="aaa"l> <li>リスト0</li> <li>リスト1</li> </ul> <ul class="bbb"l> <li class="selected">リスト2</li> <li>リスト3</li> </ul> var obj = $('aaa li, bbb li'); console.log(obj); [ 0: li, 1: li, 2: li.selected, 3: li ] console.log(obj.filter('.selected').index()); // 0 console.log(obj.filter('.selected').prev()); // length: 0 ul.aaa li と ul.bbb li を統合したobjから .selected の一つ前の要素を 取得したいのですがやり方間違っています? >>444 ですがhtmlにゴミが入っていましたのでこれになります <ul class="aaa"> <li>リスト0</li> <li>リスト1</li> </ul> <ul class="bbb"> <li class="selected">リスト2</li> <li>リスト3</li> </ul> >>421 それは意味が違うし、するにしても面倒 toggleClassは(引数なしなら)今の値の逆、つまり今の値が何かは関係ない 422だとこうなる 今の値取得->逆->設定 > 今の値の逆、つまり今の値が何かは関係ない 矛盾しとるんだが? それにtoggleClass(引数なし)は jQuery 3.0でdeprecated https://api.jquery.com/toggleClass/#toggleClass2 もう使うなよ? >>439 うん、それもあるな しかもその知識は質問者の都合無視 >>444 全然しとらんやんけ 現在値を気にする必要ない redの逆って何?青になんの? じゃorangeだったら??? toggleClassは(引数なしなら)今の値(red)の逆、つまり今の値が何かは関係ない > 今の値(red)の逆、つまり今の値が何かは関係ない 何このなぞなぞ 狐につつまれたような気分だ わかってるのにくだらない突っ込み多すぎ redの追加削除 今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない 誰でもすぐ分かるのにもうマウントに必死すぎて笑えるわ それが <span class="aaa bbb ccc ddd ・・・"> を <span class="aaa"> にする話と何が関係有るのでしょうか? 今の値が何かは関係ないということは ありでもなしでいいわけですよね? <span class="">← なしです なしの時にtoggleClass(引数なしなら)を実行したら なんになるのでしょうか? >>449 赤の逆色は青じゃない、緑 マンセル色相環 >>453 そんなにマウント取られたって言うのは可愛そうじゃね? 本人はマウント取られてないつもりかもしれんじゃん わざわざあんたいまマウント取られたんだよって教えてあげるとかw スマンここは間違えた 酔っ払ってたわ 引数ありなら、ね 酒のせいにして何もかも間違っていたと言っていたほうが良いよ? 何一つあってないんだから >>450 > 今の値(red)の逆、つまり今の値が何かは関係ない >>453 > 今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない ???? 今の値は(red)なの? 有無のこと、あるなしのことなの??? redと有無って同じなの??? 次のスレタイ=マウント取りたくてウズウズしているスレ マウント取られて悔しいのはわかるが、 マウントを避難するんじゃなくて ↓これをtoggleClassでどうしたいのかをさっさと書けばいい <span class="aaa bbb ccc ddd ・・・"> を <span class="aaa"> 既出の話題ならはいらんぞ ・・・の管理が面倒くさいって話だからな >>461 ただの揚げ足取りでマウントすらになってない >>440 > 更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい ということだろうから 勝手に妄想で「静的につけたclassが動的処理で消える問題」と無関係な条件を付けて、あなたの思う方向に結論を向けられても困る 属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか > 属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか わからんね。具体的に説明してみな なお、静的に付けたclassが消えてしまう問題は 質問者自ら、そうなんだけど・・・って言っている 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個と少ないので楽かなと ■ このスレッドは過去ログ倉庫に格納されています
read.cgi ver 07.4.7 2024/03/31 Walang Kapalit ★ | Donguri System Team 5ちゃんねる