のくす牧場
コンテンツ
牧場内検索
カウンタ
総計:127,062,854人
昨日: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,-57)
    折角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,-84)
    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 (+100,-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 (+46,-27,-1)
    >>461
    > 次のスレタイ=マウント取りたくてウズウズしているスレ

    data君がマウント取りたくてウズウズしているスレ
    622 : Name_Not - 2018/02/24(土) 21:24:59.31 ID:???.net (+42,-29,-82)
    お世話になります。
    【使用している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 (+18,-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 (+130,+29,-80)
    data君は、そもそもclass属性の存在自体が不要と言いたいのか?
    基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
    dataはその要素固有の状態を表す自由に命名できる属性として
    住み分けされてると思うんだけどな

    なんかdata君の話聞いてたらそもそもdataをdatasetではなく
    単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
    なんか残念だよね
    627 : Name_Not - 2018/02/25(日) 05:38:31.15 ID:???.net (+115,+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 (+64,+18,-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 (+24,-22,-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 (+52,-28,-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 (+11,-28,-66)
    >>636
    > 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい

    その理屈だと、jQueryで属性を変える所すべて
    HTMLから取り除けってことになるが?w
    class属性も含めて
    641 : Name_Not - 2018/02/25(日) 13:41:56.53 ID:???.net (+0,-27,-27)
    >>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 (+4,-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 スレッド一覧へ
    スレッド評価: スレッド評価について
    みんなの評価 :
    タグ : 追加: タグについて ※前スレ・次スレは、スレ番号だけ登録。駄スレにはタグつけず、スレ評価を。荒らしタグにはタグで対抗せず、タグ減点を。

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


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