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/ >>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個と少ないので楽かなと >>465
toggleClass('bbb');
toggleClass('ccc');
toggleClass('bbb ddd');
じゃね >>471
そうすると、bbbとかcccとかdddとかが増えるたびに
メンテするのが面倒くさいっていうのが本題です ちなみに
静的に付けたclassが消えてしまうことは問題でもなんでもない
承知でやってること 承知でやっているがもっといい方法ないかなーってこと。 >>472
面倒は初期だけのことでeeeが増えてその処理(toggleClass('eee')など)が増えることは当たり前で面倒でもなんでもない >>477
じゃあ、data-*属性のどこが問題かの話を何故しないのですか?
もっと優れたやり方(data-*属性)を提示したんだから
もうclassに拘る必要ないでしょ良いでしょw
はいはい、classわすれたー
data-*属性でいきましょうー >>476
じゃあお前はそこで議論から外れてください。 >>469
属性なんだから、いくらでもremoveClassやsetAttributeで干渉できるだろ >>478
ありかなしか、次のレスで解決してるのでけっこうです
でも参考になりましたわ よい方法だろうがなんだろうがゴリ押しdataくんが大嫌いなのでdataは絶対使いません! >>481
静的につけたclassが動的処理で消える 482の追記
data-属性はcssからめて別では使ってます
どうもでした >>484
じゃあclassを動的処理で消している部分をなくせば問題ないってことですよね。
=class使うなってことです。 >>486
属性を使うのを止めれば良い
お前が>>440で見当違いの事を言ってたから反論しただけなんだが、自分の間違いも認められないとは >>487
面倒だから解決方法を探してる
面倒じゃない人はお前ん中では面倒じゃないんだから
お前ん中の世界にいればいいって話 >>488
classも属性ですが?
属性を使うな、何を言ってるのでしょうか。
classが動的処理で消えるというなら、
data-*属性を使ってclassに一切触らなければ
classが消えることはありません。
反論どうぞ >>490
>>438を100回読み直せ
読解力が無さ過ぎてあきれる > data-*属性を使ってclassに一切触らなければ
data-*属性も動的処理で消せるだろ
アホなのか、こいつは >>491
読み返した所で>>438が馬鹿だとしか思えませんが?
なぜかって?classが動的処理で消える問題とか言ってるから馬鹿なんですよ。
classがremoveClass()でいっぺんに消した時に全部消えてしまうって話なんだから
data-*を使えばremoveClass()を使ったとしても消えることはない
そもそもclassを使わないのだからremoveClass()自体不要
>>438が馬鹿な理由わかりますか?この話をしてるのに
JavaScriptから消す方法があるの話を勘違いしてるんですよ
バカ以外の何物でもないでしょう
何か反論は? > data-*属性も動的処理で消せるだろ
墓穴ほってるよなーw
動的処理で消せること自体は問題にしてないのにwww ■ このスレッドは過去ログ倉庫に格納されています