元スレjQuery 質問スレッド vol.8
JavaScript覧 / PC版 / みんなの評価 :
601 = :
今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。
今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから
602 = :
まあ別にremoveClassなんて簡単な処理なんだけどねｗ
var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' '));
603 = :
こんな感じかな
$(・・・).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 = :
折角DOMTokenListが使えるclassListを使わずに
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね
605 = :
全くシンプルじゃない
スマートフォンがスマートじゃないのと同じこと
606 = :
>>604
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねｗ
607 = :
ほらねｗ
だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。
608 = :
今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに
話が通じないのは馬鹿だからか卑怯だからか
612 = :
data-*属性を使おうっていう話は
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ
いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる
613 = :
そういやremoveAttr()ってのもあったな
スペース区切りで同時に複数の属性を消せるようだ
614 = :
そうか一個しか存在しないclass属性は一つの属性に複数入れるために
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな
615 = :
>>612
それだと
> 変更の度にそこも付け加えなくてはならなくて
と変わらないぞ
616 = :
>>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 = :
もうキチガイdata君の相手するなよ
618 = :
そうそう勝ち目ないんだからｗ
619 = :
>>613
引数なしはないので代わりにはならない
620 = :
>>616
逆に言うとライブラリの想定外のものが消せない
621 = :
>>461
> 次のスレタイ＝マウント取りたくてウズウズしているスレ
data君がマウント取りたくてウズウズしているスレ
622 = :
お世話になります。
【使用しているJquery：ScrollMagic】
質問内容：setpinで要素固定、reverse:falseで固定を１度のみで指示
最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか
よろしくお願いします。
623 = :
>>619
今回の話に関係ない
>>620
今回の話に関係ない
>>621
それ言ってるのお前だけだぞｗ
>>622
ここはjQueryのスレなのでjQueryに関係ないものは対象外
624 = :
いや613＞619は関係あるだろｗ
625 = :
>>624
はぁ～、本当に説明しないと分からんのか
removeClass()の引数なしっていうのは、
削除するクラスを一つ一つ書くのが面倒だから
全部消すためにそうしてるんだよ
それをdata-name属性にうつしたのなら
全部消すのはremoveAtrr('data-name')か、
atrr('data-name', '')で終わりだろうが
なんでremoveAttrの引数なしが関係するんだ馬鹿か
626 = :
data君は、そもそもclass属性の存在自体が不要と言いたいのか？
基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
dataはその要素固有の状態を表す自由に命名できる属性として
住み分けされてると思うんだけどな
なんかdata君の話聞いてたらそもそもdataをdatasetではなく
単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
なんか残念だよね
627 = :
つうか>>616の用途ならそれこそMap使ったほうが良くね
data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
629 = :
>>616
> data-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ？ｗ
$(name).attr('class', name); これで解決
また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない
630 = :
>>626
> data君は、そもそもclass属性の存在自体が不要と言いたいのか？
そんなこと言ってない。今回の話では、今回の話では、（二度ｒｙ
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話
631 = :
>>626
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。
だから、今回の話では、今回の話では、（二度ｒｙ
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる
632 = :
>>627
> つうか>>616の用途ならそれこそMap使ったほうが良くね
Mapを使うとclass属性と同じように使うことが不可能になる
class属性の代わりの案なのだから、class属性でできることが
できなくなる方法はだめ
Mapで何が不可能になるかはすでに何度も言ってるが、
CSSでスタイルを適用できなくなる
633 = :
>>627
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
もともとclassを使っても衝突の可能性がある。
あんたがclass属性などは衝突が有るものは全て使うなと
言いたいのなら、はっきりそう言え
class属性などは使うなとはっきりいえ
「衝突の可能性がある」は事実では有るが問題点ではない
634 = :
>>629
> それはただキミの想定でのお話だろ？ｗ
>>143で書いている
> 最初つけるclassは1,2個と少ないので楽かなと
最初につけるクラスは1個の場合もあるし、2個の場合もある
そして問題が解決したわけではなく、楽と書いていることからもわかるように
これもいやだけど少ないのでまだ楽だろうという話
635 = :
>>629
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーｗｗｗｗ
class="aaa bbb" の bbbの内容をcssで書き換えて
今度はbbbを消す代わりに、cssをもとに戻すのかよｗｗｗ
思いつきで語るな
636 = :
>>635
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上
638 = :
>>636
> 無意味な値のないカスタム属性をくっつけているよりスマートだし、
だから理由かけや
説得力皆無だ
639 = :
>636
> この場合視覚的な意味合いでしか無いから.css（'プロパティ', ''）だけで済む
bbb, ccc, ddd のどこが視覚的な意味合い？
640 = :
>>636
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが？ｗ
class属性も含めて
641 = :
>>637
それだと.aaaの他に消してはならない.hogeが追加された時
結局ソースコードに修正が必要になります。
642 = :
はいはい、>>637で終了
643 = :
注意 >>637はすでに反論があって
その反論からは逃げています
645 = :
別スレにこの間書いた
値からテーブルを作るコードはデータの部分を除いてたったの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 = :
>>625
変更追加の度にnameを書き換えなくてはならないのでダメです
647 = :
>>633
classっていうのは共有のもので皆が追加していくもんだ
きちんとスペースで区切って使うというコンセンサスがあり衝突はしない
一方data-*はだれがどう使うか分からない
649 = :
この間classで衝突したけどなぁ？
どうやれば衝突しないん？
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript一覧へ類似してるかもしれないスレッド
- jQuery 質問スレッド vol.7 (1001) - [96%] - 2017/11/1 7:45
- + jQuery 質問用スレッド vol.7 + (136) - [76%] - 2022/12/5 13:00
- JavaScript の質問用スレッド vol.132 (1001) - [51%] - 2017/3/22 8:00
- + JavaScript の質問用スレッド vol.82 + (1001) - [48%] - 2011/1/19 7:54
- + JavaScript の質問用スレッド vol.89 + (1001) - [48%] - 2011/9/4 4:17
- + JavaScript の質問用スレッド vol.88 + (1001) - [48%] - 2011/7/20 7:03
- + JavaScript の質問用スレッド vol.87 + (1001) - [48%] - 2011/6/21 6:33
トップメニューへ / →のくす牧場書庫について