私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレjQuery 質問スレッド vol.8
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。
今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから
今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから
まあ別にremoveClassなんて簡単な処理なんだけどねw
var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' '));
var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' '));
こんな感じかな
$(・・・).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っぽく解釈する属性セレクタが有るから
属性を空白区切りの語のリストとして操作するプラグインは
準標準といってもいいぐらいの価値はあると思う。
$(・・・).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っぽく解釈する属性セレクタが有るから
属性を空白区切りの語のリストとして操作するプラグインは
準標準といってもいいぐらいの価値はあると思う。
折角DOMTokenListが使えるclassListを使わずに
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね
全くシンプルじゃない
スマートフォンがスマートじゃないのと同じこと
スマートフォンがスマートじゃないのと同じこと
>>604
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねw
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねw
ほらねw
だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。
だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。
今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに
話が通じないのは馬鹿だからか卑怯だからか
話が通じないのは馬鹿だからか卑怯だからか
わかった。今回の話はdata-*属性を使ったほうが
シンプルにできる。
で?
シンプルにできる。
で?
で?と言われてもな
今回はdata-*属性を使ったほうがシンプルにできるから
data-*属性を使いましょう。とかしか
何が聞きたいの?
今回はdata-*属性を使ったほうがシンプルにできるから
data-*属性を使いましょう。とかしか
何が聞きたいの?
data-*属性を使おうっていう話は
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ
いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ
いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる
そういやremoveAttr()ってのもあったな
スペース区切りで同時に複数の属性を消せるようだ
スペース区切りで同時に複数の属性を消せるようだ
そうか一個しか存在しないclass属性は一つの属性に複数入れるために
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな
>>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と??に影響をあたえること無く消したいものだけを消せる
え?ぜんぜん違う。
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と??に影響をあたえること無く消したいものだけを消せる
>>613
引数なしはないので代わりにはならない
引数なしはないので代わりにはならない
>>616
逆に言うとライブラリの想定外のものが消せない
逆に言うとライブラリの想定外のものが消せない
お世話になります。
【使用しているJquery:ScrollMagic】
質問内容:setpinで要素固定、reverse:falseで固定を1度のみで指示
最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか
よろしくお願いします。
【使用しているJquery:ScrollMagic】
質問内容:setpinで要素固定、reverse:falseで固定を1度のみで指示
最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか
よろしくお願いします。
いや613>619は関係あるだろw
>>624
はぁ~、本当に説明しないと分からんのか
removeClass()の引数なしっていうのは、
削除するクラスを一つ一つ書くのが面倒だから
全部消すためにそうしてるんだよ
それをdata-name属性にうつしたのなら
全部消すのはremoveAtrr('data-name')か、
atrr('data-name', '')で終わりだろうが
なんでremoveAttrの引数なしが関係するんだ馬鹿か
はぁ~、本当に説明しないと分からんのか
removeClass()の引数なしっていうのは、
削除するクラスを一つ一つ書くのが面倒だから
全部消すためにそうしてるんだよ
それをdata-name属性にうつしたのなら
全部消すのはremoveAtrr('data-name')か、
atrr('data-name', '')で終わりだろうが
なんでremoveAttrの引数なしが関係するんだ馬鹿か
data君は、そもそもclass属性の存在自体が不要と言いたいのか?
基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
dataはその要素固有の状態を表す自由に命名できる属性として
住み分けされてると思うんだけどな
なんかdata君の話聞いてたらそもそもdataをdatasetではなく
単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
なんか残念だよね
基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
dataはその要素固有の状態を表す自由に命名できる属性として
住み分けされてると思うんだけどな
なんかdata君の話聞いてたらそもそもdataをdatasetではなく
単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
なんか残念だよね
つうか>>616の用途ならそれこそMap使ったほうが良くね
data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
map使え派は全くサンプルコードを示さない。class派もdata派も出してるのに
>>616
> data-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ?w
$(name).attr('class', name); これで解決
また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない
> data-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ?w
$(name).attr('class', name); これで解決
また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない
>>626
> data君は、そもそもclass属性の存在自体が不要と言いたいのか?
そんなこと言ってない。今回の話では、今回の話では、(二度ry
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話
> data君は、そもそもclass属性の存在自体が不要と言いたいのか?
そんなこと言ってない。今回の話では、今回の話では、(二度ry
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話
>>626
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。
だから、今回の話では、今回の話では、(二度ry
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。
だから、今回の話では、今回の話では、(二度ry
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる
>>627
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
もともとclassを使っても衝突の可能性がある。
あんたがclass属性などは衝突が有るものは全て使うなと
言いたいのなら、はっきりそう言え
class属性などは使うなとはっきりいえ
「衝突の可能性がある」は事実では有るが問題点ではない
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ
もともとclassを使っても衝突の可能性がある。
あんたがclass属性などは衝突が有るものは全て使うなと
言いたいのなら、はっきりそう言え
class属性などは使うなとはっきりいえ
「衝突の可能性がある」は事実では有るが問題点ではない
>>629
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーwwww
class="aaa bbb" の bbbの内容をcssで書き換えて
今度はbbbを消す代わりに、cssをもとに戻すのかよwww
思いつきで語るな
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーwwww
class="aaa bbb" の bbbの内容をcssで書き換えて
今度はbbbを消す代わりに、cssをもとに戻すのかよwww
思いつきで語るな
>>635
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上
> $('.aaa').removeClass().addClass('aaa');
$('.aaa').attr('class', 'aaa'); // 最小限に明確な意図する結果にする
これが最良
$('.aaa').attr('class', 'aaa'); // 最小限に明確な意図する結果にする
これが最良
>>636
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが?w
class属性も含めて
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが?w
class属性も含めて
はいはい、>>637で終了
注意 >>637はすでに反論があって
その反論からは逃げています
その反論からは逃げています
別スレにこの間書いた
値からテーブルを作るコードはデータの部分を除いてたったの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);
値からテーブルを作るコードはデータの部分を除いてたったの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);
>>625
変更追加の度にnameを書き換えなくてはならないのでダメです
変更追加の度にnameを書き換えなくてはならないのでダメです
removeClass()って何気に便利だな
値関係なくとりあえず全部消してくれる
値関係なくとりあえず全部消してくれる
>>645
WeakMapと根本的に同じだな
WeakMapと根本的に同じだな
前へ 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
トップメニューへ / →のくす牧場書庫について