のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,689,474人
昨日:no data人
今日:
最近の注目
人気の最安値情報

私的良スレ書庫

不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitter
ログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。

元スレjQuery 質問スレッド vol.8

JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニュー
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。
レスフィルター : (試験中)
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitter
601 : Name_Not - 2018/02/24(土) 13:59:08.58 ID:???.net (+3,-29,-56)
今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。

今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから
602 : Name_Not - 2018/02/24(土) 14:36:07.77 ID:???.net (+7,-30,-44)
まあ別にremoveClassなんて簡単な処理なんだけどねw

var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' '));
603 : Name_Not - 2018/02/24(土) 14:46:41.79 ID:???.net (+3,-30,-138)
こんな感じかな

$(・・・).attr('data-class', function(attr) {
 return attr.replace(/(^|\s)foo(\s|$)/g, ' ');
});

アロー関数を使えば一行

$(・・・).attr('data-class', attr =>attr.replace(/(^|\s)foo(\s|$)/g, ' '));

これ以上減らしたければjQueryプラグインを作れば良いんじゃないかな?
一応CSSには[attr~=value]というclassっぽく解釈する属性セレクタが有るから
属性を空白区切りの語のリストとして操作するプラグインは
準標準といってもいいぐらいの価値はあると思う。
604 : Name_Not - 2018/02/24(土) 15:05:12.45 ID:???.net (+39,-29,-58)
折角DOMTokenListが使えるclassListを使わずに
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね
605 : Name_Not - 2018/02/24(土) 15:16:14.32 ID:???.net (+57,+29,-3)
全くシンプルじゃない
スマートフォンがスマートじゃないのと同じこと
606 : Name_Not - 2018/02/24(土) 15:17:20.45 ID:???.net (+68,+29,-34)
>>604
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねw
607 : Name_Not - 2018/02/24(土) 15:18:32.27 ID:???.net (+57,+29,-18)
ほらねw

だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。
608 : Name_Not - 2018/02/24(土) 15:19:18.02 ID:???.net (+55,+29,-6)
今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに
話が通じないのは馬鹿だからか卑怯だからか
609 : Name_Not - 2018/02/24(土) 15:22:20.69 ID:???.net (+0,-28,-6)
わかった。今回の話はdata-*属性を使ったほうが
シンプルにできる。

で?
610 : Name_Not - 2018/02/24(土) 15:24:55.49 ID:???.net (-1,-29,-21)
で?と言われてもな

今回はdata-*属性を使ったほうがシンプルにできるから
data-*属性を使いましょう。とかしか
何が聞きたいの?
611 : Name_Not - 2018/02/24(土) 15:42:42.97 ID:???.net (+0,-29,-37)
599です

>>600
>今回の話にremoveClass()が必要か?という話を先に決めないといけない
ごもっとも

>>602,603
removeClass()でいいかな、わかりやすいし
612 : Name_Not - 2018/02/24(土) 16:16:39.83 ID:???.net (+36,-30,-83)
data-*属性を使おうっていう話は
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ

いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる
613 : Name_Not - 2018/02/24(土) 16:19:53.90 ID:???.net (+31,-29,-21)
そういやremoveAttr()ってのもあったな
スペース区切りで同時に複数の属性を消せるようだ
614 : Name_Not - 2018/02/24(土) 16:23:35.66 ID:???.net (+57,+29,-21)
そうか一個しか存在しないclass属性は一つの属性に複数入れるために
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな
615 : Name_Not - 2018/02/24(土) 19:05:36.43 ID:???.net (+69,+29,-10)
>>612
それだと
> 変更の度にそこも付け加えなくてはならなくて
と変わらないぞ
616 : Name_Not - 2018/02/24(土) 19:24:05.19 ID:???.net (+99,-30,-208)
>>615
え?ぜんぜん違う。

classはいろんな目的で使われるから、想定外のものだって入る可能性がある
特にデザインでclassを使うのはごく普通に行われる
だから消す時に想定外のものが入っている場合どうするかという話が出てくる
data-*属性だと想定外のものは入らないのでそういった問題がない


具体的にいうと

<span class="target ?? aaa bbb ccc ・・・">というものから、
.targetのクラスという条件に当てはまるものから、aaa, bbb, cccのように
アルファベット3文字のものだけを消そうとすると面倒
removeClass()を使って全部消すと、消してはいけないtargetや??まで消える。

だけど消したいものをdata-*属性に入れていれば

<span class="target ??" data-name="aaa bbb ccc ・・・">
.targetクラスという条件に当てはまるものから、data-name属性を消すだけで
targetと??に影響をあたえること無く消したいものだけを消せる
617 : Name_Not - 2018/02/24(土) 19:30:56.75 ID:???.net (+54,+28,+0)
もうキチガイdata君の相手するなよ
618 : Name_Not - 2018/02/24(土) 19:32:27.47 ID:???.net (+52,+29,+0)
そうそう勝ち目ないんだからw
619 : Name_Not - 2018/02/24(土) 20:18:35.43 ID:???.net (+100,+29,-3)
>>613
引数なしはないので代わりにはならない
620 : Name_Not - 2018/02/24(土) 20:19:36.85 ID:???.net (+100,+29,-9)
>>616
逆に言うとライブラリの想定外のものが消せない
621 : Name_Not - 2018/02/24(土) 21:04:34.07 ID:???.net (+47,-27,-1)
>>461
> 次のスレタイ=マウント取りたくてウズウズしているスレ

data君がマウント取りたくてウズウズしているスレ
622 : Name_Not - 2018/02/24(土) 21:24:59.31 ID:???.net (+42,-29,-81)
お世話になります。
【使用しているJquery:ScrollMagic】
質問内容:setpinで要素固定、reverse:falseで固定を1度のみで指示
     最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか

よろしくお願いします。
623 : Name_Not - 2018/02/24(土) 22:01:05.12 ID:???.net (+70,+29,-35)
>>619
今回の話に関係ない

>>620
今回の話に関係ない

>>621
それ言ってるのお前だけだぞw

>>622
ここはjQueryのスレなのでjQueryに関係ないものは対象外
624 : Name_Not - 2018/02/24(土) 22:47:46.35 ID:???.net (+19,-22,+0)
いや613>619は関係あるだろw
625 : Name_Not - 2018/02/24(土) 22:59:29.84 ID:???.net (+9,-30,-116)
>>624
はぁ~、本当に説明しないと分からんのか

removeClass()の引数なしっていうのは、
削除するクラスを一つ一つ書くのが面倒だから
全部消すためにそうしてるんだよ

それをdata-name属性にうつしたのなら
全部消すのはremoveAtrr('data-name')か、
atrr('data-name', '')で終わりだろうが

なんでremoveAttrの引数なしが関係するんだ馬鹿か
626 : Name_Not - 2018/02/25(日) 05:31:41.58 ID:???.net (+128,+29,-80)
data君は、そもそもclass属性の存在自体が不要と言いたいのか?
基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
dataはその要素固有の状態を表す自由に命名できる属性として
住み分けされてると思うんだけどな

なんかdata君の話聞いてたらそもそもdataをdatasetではなく
単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
なんか残念だよね
627 : Name_Not - 2018/02/25(日) 05:38:31.15 ID:???.net (+114,+29,-56)
つうか>>616の用途ならそれこそMap使ったほうが良くね
data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
628 : Name_Not - 2018/02/25(日) 08:32:49.79 ID:???.net (-1,-29,-18)
map使え派は全くサンプルコードを示さない。class派もdata派も出してるのに
629 : Name_Not - 2018/02/25(日) 09:09:45.23 ID:???.net (+57,-30,-94)
>>616
> data-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ?w
$(name).attr('class', name); これで解決

また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない
630 : Name_Not - 2018/02/25(日) 12:02:00.86 ID:???.net (+60,+15,-35)
>>626
> data君は、そもそもclass属性の存在自体が不要と言いたいのか?

そんなこと言ってない。今回の話では、今回の話では、(二度ry
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話
631 : Name_Not - 2018/02/25(日) 12:04:02.89 ID:???.net (+80,+29,-64)
>>626
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。

だから、今回の話では、今回の話では、(二度ry
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる
632 : Name_Not - 2018/02/25(日) 12:05:51.22 ID:???.net (+23,-23,-93)
>>627
> つうか>>616の用途ならそれこそMap使ったほうが良くね

Mapを使うとclass属性と同じように使うことが不可能になる
class属性の代わりの案なのだから、class属性でできることが
できなくなる方法はだめ

Mapで何が不可能になるかはすでに何度も言ってるが、
CSSでスタイルを適用できなくなる
633 : Name_Not - 2018/02/25(日) 12:07:59.86 ID:???.net (+112,+29,-63)
>>627
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ

もともとclassを使っても衝突の可能性がある。

あんたがclass属性などは衝突が有るものは全て使うなと
言いたいのなら、はっきりそう言え
class属性などは使うなとはっきりいえ

「衝突の可能性がある」は事実では有るが問題点ではない
634 : Name_Not - 2018/02/25(日) 12:10:07.89 ID:???.net (+98,+29,-74)
>>629
> それはただキミの想定でのお話だろ?w

>>143で書いている
> 最初つけるclassは1,2個と少ないので楽かなと

最初につけるクラスは1個の場合もあるし、2個の場合もある
そして問題が解決したわけではなく、楽と書いていることからもわかるように
これもいやだけど少ないのでまだ楽だろうという話
635 : Name_Not - 2018/02/25(日) 12:11:28.81 ID:???.net (+17,-29,-58)
>>629
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーwwww

class="aaa bbb" の bbbの内容をcssで書き換えて
今度はbbbを消す代わりに、cssをもとに戻すのかよwww

思いつきで語るな
636 : Name_Not - 2018/02/25(日) 12:32:33.49 ID:???.net (+51,-29,-103)
>>635
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上
637 : Name_Not - 2018/02/25(日) 13:05:55.45 ID:???.net (-18,-30,-132)
> $('.aaa').removeClass().addClass('aaa');
$('.aaa').attr('class', 'aaa'); // 最小限に明確な意図する結果にする
これが最良
638 : Name_Not - 2018/02/25(日) 13:38:57.87 ID:???.net (+63,+29,-22)
>>636
> 無意味な値のないカスタム属性をくっつけているよりスマートだし、
だから理由かけや
説得力皆無だ
639 : Name_Not - 2018/02/25(日) 13:39:25.84 ID:???.net (+3,-29,-23)
>636
> この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む

bbb, ccc, ddd のどこが視覚的な意味合い?
640 : Name_Not - 2018/02/25(日) 13:40:51.88 ID:???.net (+12,-27,-65)
>>636
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい

その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが?w
class属性も含めて
641 : Name_Not - 2018/02/25(日) 13:41:56.53 ID:???.net (+0,-27,-26)
>>637
それだと.aaaの他に消してはならない.hogeが追加された時
結局ソースコードに修正が必要になります。
642 : Name_Not - 2018/02/25(日) 14:13:14.27 ID:???.net (+51,+24,+0)
はいはい、>>637で終了
643 : Name_Not - 2018/02/25(日) 14:33:18.98 ID:???.net (+57,+29,-5)
注意 >>637はすでに反論があって
その反論からは逃げています
645 : Name_Not - 2018/02/25(日) 16:22:13.07 ID:???.net (+24,-30,-205)
別スレにこの間書いた

値からテーブルを作るコードはデータの部分を除いてたったの6行でできる。
(アロー関数を使えばもっと減らせる)

http://jsfiddle.net/1uopxycn/

var data = [
 [{text: 1, colspan:2},{text: 3}],
 [{text: 1},{text: 2},{text: 3}],
 [{text: 1},{text: 2},{text: 3, style: 'color:red'}],
];

var rows = data.map(function(row) {
 return $('<tr/>').append(row.map(function(attrs) {
  return $('<td/>', attrs);
 }));
});
$('#table').append(rows);
646 : Name_Not - 2018/02/25(日) 18:44:14.42 ID:???.net (+3,-25,-7)
>>625
変更追加の度にnameを書き換えなくてはならないのでダメです
647 : Name_Not - 2018/02/25(日) 18:56:41.42 ID:???.net (+72,+29,-14)
>>633
classっていうのは共有のもので皆が追加していくもんだ
きちんとスペースで区切って使うというコンセンサスがあり衝突はしない
一方data-*はだれがどう使うか分からない
648 : Name_Not - 2018/02/25(日) 21:39:54.90 ID:???.net (+0,-28,-15)
removeClass()って何気に便利だな
値関係なくとりあえず全部消してくれる
649 : Name_Not - 2018/02/25(日) 21:54:32.19 ID:???.net (+58,+28,-10)
この間classで衝突したけどなぁ?
どうやれば衝突しないん?
650 : Name_Not - 2018/02/25(日) 22:06:27.88 ID:???.net (+0,-29,-3)
>>645
WeakMapと根本的に同じだな
←前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ→ / 要望・削除依頼は掲示板へ / 管理情報はtwitterで / JavaScript スレッド一覧へ
スレッド評価: スレッド評価について
みんなの評価 :
タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

類似してるかもしれないスレッド


トップメニューへ / →のくす牧場書庫について