jQuery 質問スレッド vol.8

1Name_Not_Found2017/10/23(月) 06:31:18.14ID:???
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/

2Name_Not_Found2017/10/23(月) 06:32:06.08ID:???
■テンプレ案
https://fiddle.jshell.net/6ksf2087/show/light/

■参考URL
ダウンロード、CDN
http://jquery.com/download/
ブラウザサポート
http://jquery.com/browser-support/
jQuery UI
http://jqueryui.com/
jQuery UI ダウンロ−ド
http://jqueryui.com/download/
リファレンス等
http://alphasis.info/
http://www.jquerystudy.info/
http://js.studio-kingdom.com/
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
http://qiita.com/fmy/items/345a264a1cf2e2a73f62

3Name_Not_Found2017/10/23(月) 06:33:03.88ID:???
テンプレここまで

4Name_Not_Found2017/11/21(火) 21:10:07.35ID:???
classの使い方違うと言われそうだがあえて質問。

<li id="i" class="hage hoge a1">
<li id="ro" class="hage hoge a2">
<li id="ha" class="hage a3">

<li id="ni" class="hage hoge a9">
<li id="ho" class="hoge a10">

liの数は10個固定。順序は動的に入れ替わる。
上のidは適当につけたもので、これは動的に変わらず(変えず)。
hage hogeはあったりなかったり、a○はどれかの数字で必ずある
a○の1〜10の数は固定で他の数字が入ることはない。
a2←→a9など動的に入れ替わる。

で、任意の、例えば#roのa○のその時点での数字を取得するにはどうしたらいいでしょうか?
attributesで取得して正規表現で探すとか…は面倒だし無駄だし。
属性使えばattr()で簡単にできるがclassでできないものかと思いまして。

5Name_Not_Found2017/11/21(火) 23:24:04.99ID:???
>>4
順序が入れ替わるのなら index() は無意味なので
className から取るしか無いと思う
var num = (elm) => elm.attr('class').match(/a\d+/)[0].replace(/a/, '');
console.log(num($('#ro')));

6Name_Not_Found2017/11/22(水) 01:59:23.08ID:???
>>4
class名をデータのように扱うなら、data-*属性を使う実装に変える方がいいと思う
classでやるなら、classListから正規表現を使う

> attributesで取得して正規表現で探すとか…は面倒だし無駄だし。
そもそも、class名から数字を抽出する処理が無駄なわけでclass名を使うことがナンセンスかと

7Name_Not_Found2017/11/22(水) 21:18:09.81ID:???
無駄ナンセンス、やはりそうですか。
data-は動的に変更した時点で即CSSと連動できましたっけ?

a○は
.a1 {}
.a2 {}
.a3 {}
というふうにCSSのためなのです。

8Name_Not_Found2017/11/23(木) 11:07:21.49ID:???
>>5
こういう記述はまだ早いという人のほうが多いんじゃないかな
今のうちこれにしても数年後スタンダードになってるとも思えん

9Name_Not_Found2017/11/23(木) 13:52:01.23ID:???
>>7
[data-hoge=a1] {
}
で定義できるよ。

10Name_Not_Found2017/11/23(木) 16:08:20.34ID:???
datasetをcssでも使うならjQueryの.data()以外で読み書きしないとだめだな

11Name_Not_Found2017/11/23(木) 16:59:14.28ID:???
即連動できるかに対して定義できるよって
ajax見たいにキャッシュ無効にできて即DOM書き換えられればいのにな

12Name_Not_Found2017/11/23(木) 17:22:25.58ID:???
11だが俺も書き方悪かった
ようは誤解招きかねない書き方だなと

ネイティブjsでも書き換え必要→なら最初からattrでいいんじゃね?→
data-でなくユーザ指定の属性はいいのか、と
これやっちゃってる人多いと思う

13Name_Not_Found2017/11/23(木) 21:38:30.89ID:???
>>8
かっこつけて先走りしたはいいが後で書き直すパターンかもな。

>>10
開発者?はなんでこんな設計にしてしまったのだろう。
これでしかできなかったのかね。

14Name_Not_Found2017/11/24(金) 22:48:48.23ID:???
無難に独自属性attr()でやる(すでにやってる)ことにします。ありがとう。

15Name_Not_Found2017/11/26(日) 15:52:35.16ID:???
jQueryはCSSは相性いいが、jsとCSSはいまいちだな
オブジェクト(連想配列)がCSSのプロパティと連動できれば最高なんだが

16Name_Not_Found2017/11/26(日) 16:01:37.03ID:???
DOMではCSSは取得出来ないからな
相性どころか次元が違う

17Name_Not_Found2017/11/27(月) 04:53:42.11ID:???
もう入り始めてるけどCSS Typed OMで記述は長くなるかもしれないが
ロジック的にきれいに書ける

18Name_Not_Found2017/11/27(月) 20:35:28.42ID:???
だがjQueryは元はjs

19Name_Not_Found2017/11/27(月) 21:38:57.34ID:???
元jsなw

20Name_Not_Found2017/11/28(火) 02:56:02.42ID:???
document.styleSheets すら参照できないjQueryとDOMを比較するのもどうかと思った

21Name_Not_Found2017/11/28(火) 09:35:39.74ID:???
document.styleSheetsを引き合いに出すのはちょっとね
DOM APIでもdocument.styleSheetsを弄るのは最終手段で気持ちの悪いことだし

22Name_Not_Found2017/11/28(火) 20:50:26.26ID:???
そうかね
俺はインラインスタイルを多用するコードの方が気持ち悪く感じるな

23Name_Not_Found2017/11/28(火) 22:02:45.18ID:???
まあ、classやattributeでスタイルを書き換えるのがメインだから、setterとしての.css()には魅力を感じないというのはある

24Name_Not_Found2017/11/28(火) 22:14:14.27ID:???
>>16
言うまでもないがjQueryはセレクタが便利
jsのノード取得ももっと拡張するとか

25Name_Not_Found2017/11/28(火) 22:26:03.38ID:???
>>15がいっているのはこういうことだろうが、
jQuery(element).css({color: 'black', 'background-color': 'white'});
classでやれることをインラインスタイルで代替する事はまずない
インラインスタイルや!importantは基本避けるべき技術だな

26Name_Not_Found2017/11/28(火) 22:57:05.02ID:???
だなって、インラインスタイルや!importantが出てくる意味がわからん

27Name_Not_Found2017/11/28(火) 23:21:50.21ID:???
(attr()で属性変える=CSSも変わる)
(オブジェクト変える≠CSSも変わる)
だな

28Name_Not_Found2017/11/29(水) 01:34:48.51ID:???
.css()がインラインスタイルを書き換えている事を知らないんだろう
jQueryしか触ってないからDOMの基本も分かってない

29Name_Not_Found2017/11/29(水) 20:33:02.73ID:???
誰に言ってるんだよ{

30Name_Not_Found2017/11/29(水) 21:03:16.39ID:???

31Name_Not_Found2017/11/29(水) 22:07:15.65ID:???
26だがインスペクタも見てるから嫌でも気がついてますが

32Name_Not_Found2017/11/29(水) 22:26:44.38ID:???
>>25
>>15がいっているのはこういうことだろうが、

残念ですが違います

33Name_Not_Found2017/11/29(水) 23:14:20.01ID:???
>>28
そういう意味じゃないだろ?
DOMオブジェクトの要素からCSSが取得できないってことだろw
お前こそ基本が分かっていない

34Name_Not_Found2017/11/30(木) 00:00:12.46ID:???
>>19
何が違うん?

35Name_Not_Found2017/11/30(木) 00:16:38.16ID:???
オブジェクト変えるでcss()だけしか出てこなかったのかね

36Name_Not_Found2017/11/30(木) 07:14:56.48ID:???
>>33
「CSSが取得できない」が抽象的すぎて何をいってるのか、さっぱり分からん
もっと、具体的に書いてくれ

37Name_Not_Found2017/11/30(木) 07:59:24.41ID:???
>>15
イメージを言語化できてない感があるから
jQueryとDOMで何が違うか、コードに書き表してみたら?

38Name_Not_Found2017/11/30(木) 08:04:14.53ID:???
element.style, getComputedStyle, CSSRuleList
DOMにCSS捜査のために必要なオブジェクトは十分に揃ってる

39Name_Not_Found2017/11/30(木) 11:13:44.08ID:???
>>37
//css
#hoge { color: red; }

//html
<div id="hoge">文字はred</div>

//id hoge のcolorを取得
var jqCss = $('#hoge').css('color');
console.log(jqCss);
var ele = document.getElementById('hoge');
var jsCss = document.defaultView.getComputedStyle(ele, null).getPropertyValue('color');
console.log(jsCss);

こういうことだろうな

40Name_Not_Found2017/11/30(木) 18:09:56.25ID:NP26bmOI
<div class="幅500px">
<iframe class="IMG"><img 幅800画像></div>
aaa
</div>

上記ソースはテンプレでいじれないものとして。
幅500pxクラス内に写真が貼られた場合のみ</div>要素を追加し、
画像幅制限を解放し最後にもう一度幅500pxクラスを追加したいのですが、
クラスコードがそのまま文字クラスとして挿入されません。
$('.IMG').before('</div>');
$('.IMG').after('<div class="幅500px">');

希望は:
<div class="幅500px">
</div>←追加希望
<iframe class="IMG"><img 幅800画像></div>
<div class="幅500px">←追加希望
aaa
</div> 👀
Rock54: Caution(BBR-MD5:0be15ced7fbdb9fdb4d0ce1929c1b82f)

41Name_Not_Found2017/11/30(木) 19:16:20.61ID:???
>>40
htmlからして無茶苦茶

42402017/11/30(木) 19:25:35.96ID:NP26bmOI
>>40
質問を具体的にさせていただきますのでどなたかヘルプ願います。
<div class="A"> // 500px幅の画面中央寄せブロック
テキスト
<div class="IMG"> 画像(100^1200px) </div>
テキスト
</div>
上記ソースをいじらず、500幅制限ブロック内で
それを越える幅を持つ画像が挿入された場合のみその画像を
最大幅1000pxまでを条件に拡大させて
親要素を無視して画面センタリグさせる方法はないでしょうか?

43Name_Not_Found2017/11/30(木) 20:05:39.79ID:???
>>42
imgのwidthを取得して、imgのwidthが500px以上なら1000pxに拡大する
img或いは、div.IMGののmargin-leftを-250pxにすれば良いんじゃないの?

44Name_Not_Found2017/11/30(木) 20:31:49.13ID:???
>>38
めんどくささが全然違うのをさも同等にできるかのように引き合いに出さなくてもいいよ

45Name_Not_Found2017/11/30(木) 20:38:58.38ID:???
>>39
「オブジェクト(連想配列)がCSSのプロパティと連動できれば最高」はどこへ行った?
あと、>>35とは解釈が違うな

46Name_Not_Found2017/11/30(木) 20:42:55.46ID:???
>親要素を無視して

子孫要素は、親の位置から、相対的に指定するものじゃないの?

47422017/11/30(木) 20:54:27.27ID:NP26bmOI
>>43
このテンプレにランダムサイズの画像が入るときがある場合がある、という感じなので、
その都度計算してmarginとpaddingとかではなく単純に親要素を無視して、
もしくは>>40のように親の閉じタグを追加、末尾に親開始タグを入れられないかと、、

48Name_Not_Found2017/11/30(木) 21:02:23.59ID:???
>>39
第三者が想像で書いてる時点で不毛だなあ
また、「残念ですが違います」だけ返されて終わりそう >>32
本人は何がどう違うのか説明する気はないみたいだし、議論の価値なしかな

49Name_Not_Found2017/11/30(木) 21:12:44.20ID:???
(オブジェクト変える=CSSも変わる、ができるといいな)
だな

50Name_Not_Found2017/11/30(木) 21:54:33.89ID:???
>>37
想像できなければ無理に入ってこなくてけっこう
どうせまたクセの強いコードやライブラリでどうこうするだけだろ
ちなみに擬人化なら俺がしたるで

51Name_Not_Found2017/11/30(木) 22:38:43.40ID:???
>>47
$('.IMG').each(function(){
var $img = $(this).find('img');
if ($img.width() > 500) {
$img.width(1000);
$(this).css({'width': '1000px', 'margin': '0 auto'}).parent().before('<div class="A">add</div>').before(this);
}
});

こんな感じかな

52Name_Not_Found2017/12/01(金) 00:08:19.93ID:???
>>42
みその画像っていうのは何みそですか?

53Name_Not_Found2017/12/01(金) 00:14:07.69ID:lUIdGgqz
>>51
<div class="1">
<div class="A">
テキスト
<div class="IMG">画像</div>
テキスト
</div>
</div>
これが以下のようにA親要素の上に来てしまいました。

<div class="1">
add
<div class="IMG">拡大化された画像</div>
<div class="A">
テキスト
テキスト
</div>
</div>

これだとテキストと画像の順番が変わってしまいますね。
やはり単純に親要素範囲内のテキストははみ出さずに、
親要素以上の幅を持つ画像が挿入された場合はそれのみ親幅を超えてセンタリング表示される
というのは無理な話なのでしょうか。。

54Name_Not_Found2017/12/01(金) 00:23:48.90ID:???
というかjQueryの前にHTMLとCSSで
before と after を作ろうか?

それさえあれば変換する方法は簡単な話だ

55Name_Not_Found2017/12/01(金) 00:43:41.67ID:lUIdGgqz
>>54
<div class="100%wide_center_box">
<div class="500px_center_box">
テキスト
<div class="IMG">500で表示画像</div>
テキスト
</div>
</div>
----
.100%wide_center_box img {
max-width: 1000px;
margin: 0px auto;
}
htmlはいじれません。cssとスクリプトのみ書けます。
なので「可能なら」手っ取り早く画像直前で親クラス閉じタグ追加し、
好きなサイズで画像をセンタリング表示させ、
最後に親クラス開始タグ追加すればいいかとbeforeとafterで試みましたがうまく行かず、、
<div class="centerbox">
<div class="500box">
テキスト
</div>←追加
<div class="IMG">css指定した任意のサイズで画像表示</div>
<div class="500box">←追加
テキスト
</div>
</div>

56Name_Not_Found2017/12/01(金) 06:00:43.22ID:???
>>55
画像の数は不特定多数?いくつかの固定数?
後者の場合、ファイル名は不特定?いくつかの固定数?

57Name_Not_Found2017/12/01(金) 09:48:42.19ID:???
>>49
jQueryにそんな機能はないし、>>39で説明できてないけどね

58Name_Not_Found2017/12/01(金) 10:16:37.02ID:???
>>57
DOMの扱いにくさを説明しているだけだろ?

59Name_Not_Found2017/12/01(金) 10:41:05.23ID:???
>>58
>>15とは無関係だね
>>50で当人は捨て台詞を残してるけど、彼の意見を正確に理解した人はいないわけで

60Name_Not_Found2017/12/01(金) 11:22:49.66ID:???
>>55
$('.IMG').each(function(){
var $img = $(this).find('img');
var $parent = $(this).parent();
var $contents = $parent.contents();
if ($img.width() > 500) {
$img.width(1000);
var $this = $(this);
var $div = $('<div class="500px_center_box" />' ).text($contents[2].textContent);
$contents[2].textContent = '';
$parent.after($this, $div);
}
});

こういうことかな?
.500px_center_box 内にインライン要素が入ってたらまた違うけどね

61Name_Not_Found2017/12/01(金) 20:51:22.71ID:???
そもそも、できたらいいな=できないことをコード化しろって

62Name_Not_Found2017/12/01(金) 22:31:27.31ID:???
>>53
>親要素以上の幅を持つ画像が挿入された場合はそれのみ親幅を超えてセンタリング表示される
はcssだけでできなくもないがかなり条件があるので>>56に答えてくれんと何とも書けない

63Name_Not_Found2017/12/03(日) 19:38:05.40ID:???
他スレより。ただしおすすめはしない。
自分的には、気持ち悪いしそもそも右に幅があるなら最初からその幅で固定する。

<select id="hoge">
 <option>ああああああああああああああああああああ</option>
 <option>いいいいいいいいいいいいいいいい</option>
 <option>ううううううううううううううううううう</option>
</select>

$('#hoge').on('mouseover', function(){
 $(this).width('300px');
});

$('#hoge').on('mouseleave', function(){
 $(this).width('100px');
});

64Name_Not_Found2017/12/03(日) 20:06:35.37ID:???
>>63
ほかスレじゃ、ここを見た人が分からんだろ

HTML/CSS の質問に優しく答えるスレ 30
http://mevius.2ch.net/test/read.cgi/hp/1508043632/366

それにそのコードはjQueryはいらない
HTMLとCSSだけでできる

なので元スレの方に答えを書いた

65Name_Not_Found2017/12/03(日) 23:27:41.55ID:???
後出しで答えってw

66Name_Not_Found2017/12/04(月) 00:32:10.56ID:???
CSSの話題だからここはスレ違いってだけ

67Name_Not_Found2017/12/04(月) 19:42:35.79ID:???
勘違いと認めて謝罪までしてるのに更に追い詰めるヤツ
会社で嫌われてるんだろうな

68Name_Not_Found2017/12/05(火) 00:06:41.52ID:???
そうやってレスするから、
レス返すしかないだろ
お前が悪いんやで

69Name_Not_Found2017/12/05(火) 01:34:44.34ID:???
>>67
自分で「部下に頼られる」書いてたわw

70Name_Not_Found2017/12/05(火) 01:56:47.96ID:???
俺のことじゃなかったのか

71Name_Not_Found2017/12/12(火) 03:02:24.32ID:MrUcGD8N
HPで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

5J59HFYTNJ

72Name_Not_Found2017/12/14(木) 21:34:08.50ID:???
>>70
どんだけ自意識強いんねん

73Name_Not_Found2017/12/18(月) 22:46:59.92ID:Nm/ZqwPI
今UIのAccordionを使用してますが項目が増えたので
https://www.meanthemes.com/demo/meanmenu/demo.html
の動作のように2層化させたいです(デモの+-は不要)。

<div id="a">
 <h3>
 <div id="b1">
 <h3>
 <div id="b2">
  <h4>
  <div id="c1">
  <h4>
  <div id="c2">

var $a = $(document.getElementById('a'));
$a.accordion();

この場合、
var $b2 = $(document.getElementById('b2'));
$b2.accordion();
と加えればいいのでしょうか。

また、b2レベルが多数ある場合
$b3.accordion();、$b4.accordion();、・・・
などとその都度増やさないといけないのでしょうか。
お願いします。

74Name_Not_Found2017/12/18(月) 22:50:42.08ID:???
まず

var $a = $(document.getElementById('a'));
$a.accordion();



$('#a').accordion();

75Name_Not_Found2017/12/18(月) 22:54:58.72ID:???
<div id="a" class="accordion">
 <h3>
 <div id="b1">
 <h3>
 <div id="b2" class="accordion">
  <h4>
  <div id="c1">
  <h4>
  <div id="c2">

$('.accordion').accordion();

76Name_Not_Found2017/12/20(水) 19:47:08.04ID:???
>>75
それ動いたとしても公式にいいの?

77Name_Not_Found2017/12/20(水) 20:33:44.98ID:???
何となく動くようなら十分だろ
そんなに心配ならフルFlashででも作っとけ

78732017/12/20(水) 21:52:07.16ID:???
レスありがとうございます。

>>74
$aは他で何回か使っているので73のようにしてたのですが
$('#a')でないといけないのでしょうか?

>>75
それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。

79Name_Not_Found2017/12/20(水) 22:32:44.16ID:???
>>78
> $aは他で何回か使っているので73のようにしてたのですが

メソッドチェーンを使えばいいので一つの関数内で何回も使う必要はない
別のイベントハンドラで使うならば、その都度取得した方がいい
イベントハンドラが違うということは要素に変化がある可能性があるから
別の関数で使うならば、関数の分割の仕方が悪い
何回も呼び出されてパフォーマンスに影響をあたえる場合は変数に入れるという手もありだが
そんな事例は少なく、一般論として短い書き方である$('#a')としたほうがよい

> それぞれにoptionが使えなかったりイベント拾ってるので問題ありです。
ならまとめられる部分だけまとめればいい

80Name_Not_Found2017/12/21(木) 09:11:46.46ID:???
>>78
結果的には同じなのでいけない、間違いということではない
$(...) 【 jQuery(...) 】 はjQuery API を使用するということ
jQuery API では$('#a') というセレクタが用意されているので
わざわざインターフェイスからメソッド継承で jQuery API を使用する必要はない

81Name_Not_Found2017/12/21(木) 21:50:15.49ID:???
>>77
明らかにリファレンスやサンプルソースと違う場合、バージョンアップなどで不具合の可能性を残すことになる
つまりその時点で問題点を抱えることになり、己で首を絞めてるようなもの
疑問や不安が出るのは自然であり、今動けばいいなどと安易な輩と一緒に仕事してる人たちが気の毒だわ

82Name_Not_Found2017/12/21(木) 22:10:08.66ID:???
>ならまとめられる部分だけまとめればいい
無茶言うな〜

83Name_Not_Found2017/12/21(木) 22:18:42.82ID:???
>>81
馬鹿だな
そんなこと言ってちゃなんにも使えないって言ってるんだよ
不安で不安で何もできないより、適当に動く方がいい
そもそも見る方の環境も様々なのがWebだからね
バージョンの際には問題があれば対処すればいいだけ
そもそも流れの速いWebで同じライブラリやコードをいつもでも使おうと考える方が間違い

84Name_Not_Found2017/12/21(木) 22:51:04.27ID:???
んなこたない
どんだけ暇人なんだ
その1件とは限らんだろ
まさか10年単位で使おうってわけでもあるまい

85Name_Not_Found2017/12/21(木) 23:02:57.65ID:???
>>82
UI使っててそれはないわな
なら裸で書くだろ

ちなみに$aか$('#a')かはどっちでもいい
好みで使っとけ

86Name_Not_Found2017/12/22(金) 00:01:21.23ID:???
>>78
何度も使うから、変数a にキャッシュしたのか

#a が永久に変化しないのなら、それで良い。
ただし、const, let か、定数を明記しておくこと

87Name_Not_Found2017/12/22(金) 21:06:01.08ID:???
const来た〜!!!

88Name_Not_Found2017/12/22(金) 21:21:04.34ID:???
ちげーよw constは俺だ

89732017/12/22(金) 23:03:00.26ID:???
>>79
まとめるがよくわかりませんが全て異なる処理の部分もあるので結局idの方がとなってしまいます。

90Name_Not_Found2017/12/23(土) 08:32:52.14ID:eqSmGdLx
javascriptもしくはjqueryでhtml文字列を渡したらサニタイズしたものを
返してくれる関数無いですか?

91Name_Not_Found2017/12/23(土) 10:07:56.79ID:???
>>90
そんなものは要らない

「サニタイズ言うなキャンペーン」とは何か
http://takagi-hiromitsu.jp/diary/20051227.html#p02

92Name_Not_Found2017/12/23(土) 10:35:22.93ID:???
>>90
javascriptでサニタイズする関数は無いよ
何が目的なのか解らないけど
$('<hoge>').text().html() で特殊文字はエスケープ出来るけど

93Name_Not_Found2017/12/23(土) 11:26:14.89ID:eqSmGdLx
>>92
ブラウザ側でsocket.ioで受信したデータをサニタイズして表示しようとしています。
$('<hoge>').text().html()の使い方についてですが、
<hoge>の部分は何でも良くて、textメソッドにサニタイズしたいタグが含まれる
可能性のある文字列を入れると戻り値としてサニタイズされた文字列が返るという
ことでしょうか?

94Name_Not_Found2017/12/23(土) 13:06:10.80ID:???
ほらくそ、真面目にサニタイズとかに答えるから
サニタイズ言うなキャンペーン読んでこい
今後サニタイズ言うな
正しい言葉で質問し直せ
でないと答えられんだろうが

95Name_Not_Found2017/12/23(土) 13:38:46.89ID:eqSmGdLx
サニタイズ言うなキャンペーン読んできましたが、
結局どうしたらいいのか良く分かりません。結局どうすればいいのですか?

サニタイズ言うなということは、HTMLタグを無効化するとか言えばいいのですか?

96Name_Not_Found2017/12/23(土) 13:41:33.37ID:???
無理に難しく言わずに用語を知らないのなら、
どうしたいのかを書けばいい

97Name_Not_Found2017/12/23(土) 13:57:18.81ID:eqSmGdLx
socket.ioでブラウザ(クライアント側)に送られてくるデータは他のユーザーが
送信したデータなのでHTMLタグなどを含んでいます。
(リアルタイムチャットサイトを作っています)
なので、受信したデータのHTMLタグなどを無効化したいです。

98Name_Not_Found2017/12/23(土) 14:17:24.35ID:???
そういうのは無効化なんていわないんだよ。まあいいや
まずな、ブラウザに送られてくるデータっていうのは
サニタイズとか無害化とか無効化しようと考えるな。そのまま使え

でだ、問題が有るときはそのデータを「画面に表示するときだけ」なんだよ

言ってる意味わかるか? 計算に使ったりメッセージを組み立てる時とか
そういうときには、無効化する前のデータを使うってことだ。

そして一番最終段階、画面に表示するときにHTMLタグをタグとして表示するのではなく
(無効化ではなく)文字列として表示すれば良いんだよ

その場合にやるのは、<> という文字を &lt; &gt; に変換(HTMLエスケープ)するってことだ。
これが本当にお前がやりたいことだ。
無効化とかサニタイズという言い方じゃ、こういうことをしたいのかって分からんだろ?
例えば <> を消したり大文字に変換したとしても、HTMLタグとして表示されないわけで
目的(サニタイズ)は達成できてるとも言える。

それからJavaScriptにはURIエスケープは有るがHTMLエスケープはない
文字列置換で自分で作ることはできるが。そもそもそんなことをする必要がない。

なぜなら、jQueryであればhtml()メソッドを使ってデータを表示されるだけで
自動的にHTMLエスケープが行われるからだ

99Name_Not_Found2017/12/23(土) 14:38:15.63ID:eqSmGdLx
言葉が適切でなかったことを謝ります。
詳しく教えていただきありがとうございます。

100Name_Not_Found2017/12/23(土) 19:18:16.54ID:???
>>75
まともに動かないし動くわけがない

101Name_Not_Found2017/12/23(土) 19:53:58.10ID:???
理由書いてないから無視すべき書き込みだなw

102Name_Not_Found2017/12/23(土) 21:08:42.85ID:???
理由なんていらんわな
見ればわかること

103Name_Not_Found2017/12/23(土) 22:42:39.63ID:???
jQueryも不要
要素作って textContentに設定するだけ
(改行スタイルを CSS white-spaceで設定する)

104Name_Not_Found2017/12/23(土) 23:02:45.41ID:???
hとdivの関連性が崩れてる
UIだとカスタマイズや変更が楽だしKBも対応してるんだよな

UI使わないにしてもwhite-spaceなんぞ使わなくてもできるよ

105Name_Not_Found2017/12/24(日) 00:32:29.20ID:???
なんだ、<, > などの文字が、&lt;, &gt; に変換される、HTMLエスケープの事か

DOM 操作とか、<script> タグなどは、気を付けた方がいい

106Name_Not_Found2017/12/25(月) 22:21:01.37ID:???
バリデーション、エスケープ、フィルタリング、サニタイズ
勘違いや境目や定義の曖昧さで紛らわしくなる場合がある
>>96がごもっとも

107Name_Not_Found2017/12/25(月) 22:49:01.92ID:???
モジュールとカセットの違いを教えてください

108Name_Not_Found2017/12/29(金) 18:45:05.43ID:oD//DbIw
ソース内に一箇所だけ書かれてる「class="ランダム英数字"」を
新規にwrap()追記する際にwrap('<a href...内に
その「class="ランダム数字"」を記入することってできます?
class="(.*?)"ですかね?でも貼り付けがわからず、、
同要素、クラス内の検索置換ってのは見つかるんだけど、
ソース全体から正規表現で拾ってきたものをある場所にペーストする、ってのがわからず、、
よろしくお願いします!

109Name_Not_Found2017/12/29(金) 19:28:23.41ID:???
>>108
できるよ

110Name_Not_Found2017/12/30(土) 10:58:54.21ID:???
数字なら¥d+とかで複数桁までオケじゃね

111Name_Not_Found2017/12/30(土) 11:04:08.31ID:???
ランダム英数字の定義で、[A-Za-z0-9_] なら、\w。
アンダーバーを含まないなら、[A-Za-z0-9]

クラスを持つ、すべての要素から、半角英数字だけのクラスを取り出して、
最初の1つが見つかったら、return false; で、each 内から抜ける

wrap については「jQuery, wrap/wrapAll/wrapInner」で検索して

$( '[class]' ).each( function(){
if ( /^[A-Za-z0-9]+$/.test( $(this).prop('class') ) ){

console.log( $(this).prop('class') );
return false;
}
} )

112Name_Not_Found2017/12/30(土) 12:32:28.43ID:???
> console.log( $(this).prop('class') );
www

113Name_Not_Found2018/01/02(火) 02:06:34.00ID:???
こっちに誘導されたんで来ました
jQueryで別ファイルからヘッダとフッタを読み込みってことやったんですが、処理は上手く行っているようだが
サーバーのファイルを更新してもjQueryで読み込むから日付チェックをしていないようで古いものがキャッシュから読まれてしまう
こう言うの抑止する方法とかありませんか?

当方webに関しては殆ど素人です

114Name_Not_Found2018/01/02(火) 09:22:18.47ID:???
>>113
いまどうやってるかを書かないと
エスパーするしかないと思う

たとえば$.getでとってるなら
cache: falseとか
(日付チェックとは違うけど)

115Name_Not_Found2018/01/02(火) 10:05:03.56ID:???
>>114
すみません。ググったらなんとかなった
$(function () {
$.ajaxSetup({
cache: false
});
});
足したら直りました

ちなみに、ここで動画管理のアプリ配っています(Windows10用)
http://www7b.biglobe.ne.jp/~megatherium/

webは、ほぼ素人なので夜中に焦りましたわw

116Name_Not_Found2018/01/10(水) 19:11:44.11ID:???
すみません、質問です

html内にボタンを設置し、そのボタンをクリックすると他のページからメールフォームを読み込むページを作成しているのですが、
メールフォームは読み込みこめたのですが、メールフォームに付いてる住所の自動入力のスクリプトが適用されません
どのようにすればよいでしょうか?

<!-- ボタン・インクルードスクリプト -->

$('#*** a').click(function(){
$('#***').load('***.html #*** ');
return false;
});


<!-- 住所の自動入力スクリプト-->

$(window).ready( function() {
$('#postcode').jpostal({
postcode : [
#postcode'
],
address : {
'#address1' : '%3',
'#address2' : '%4%5'
}
});
});


当方、超初心者なので説明が下手かもしれませんがどうぞ宜しくお願いします

117Name_Not_Found2018/01/11(木) 02:30:34.34ID:???
そこまで初心者なら勉強しろ
ここは自ら勉強するものが躓いたときに聞きに来るところであって
コードを丸投げして直してもらうところではない
それが嫌なら有料でやれ

118Name_Not_Found2018/01/11(木) 07:31:37.72ID:XsyiIf16
>>117
そうカリカリすんなよw

119Name_Not_Found2018/01/11(木) 12:53:38.33ID:???
>$(window).ready( function() {
「$(document).ready()」と「$(window).load()」の違いが分からないのなら、以下を使う

$(function() {
// ここに処理内容を書く
});

それに、これらは最初のページの読み込みに反応するだけで、
後から、非同期(Ajax)で読み込んだ部分には反応しない

自分で、one(), on() で、要素にイベントハンドラーを付けて、処理すれば?

120Name_Not_Found2018/01/11(木) 17:08:14.25ID:???
>>119
ありがとうございます!!

出来ました!

121Name_Not_Found2018/01/13(土) 20:15:22.63ID:???
jQuery というより javascript に関する質問なのですが、よろしくお願いします。

<select id="sel">
<option value="a">A</value>
<option value="b">B</value>
<option value="c">C</value>
<option value="d">D</value>
</select>

<div id="img"></div>

こんな感じのとき、#sel の選択中に A〜D に応じるイメージを #img に表示したいと思っていますが、
option に hover イベントを仕掛けてもうまく行かないように思います。

選択項目が変化していることを知る方法はありますでしょうか?

$('#sel').change( function(){ hogehoge.. } ) はうまくいきます。

122Name_Not_Found2018/01/13(土) 20:16:49.33ID:???
>>121
すいません。
<option>の閉じは</option>です。

123Name_Not_Found2018/01/13(土) 20:46:30.80ID:???
>>121
正確に言うとDOMの話なんでJavaScriptの話じゃないけどな。
JavaScriptはブラウザ以外でも動く。ブラウザ特有のものはJavaScriptではない

124Name_Not_Found2018/01/13(土) 22:10:37.98ID:???
>>123

121, 122 です。それは失礼しました。
で、答えは?

125Name_Not_Found2018/01/13(土) 22:39:45.98ID:Fu9ngI75
buttonをクリックしたら特定のdivの中にある画像をクリップボードにコピーしたいの
ですが、jQueryあるいはJavaScriptで出来ますか?

126Name_Not_Found2018/01/13(土) 23:36:12.01ID:???
それもDOMの話だな

127Name_Not_Found2018/01/13(土) 23:40:48.25ID:???
>>125
できる

128Name_Not_Found2018/01/13(土) 23:41:38.51ID:???
>>127だけどごめん、画像ならできないかも
やったことない

129Name_Not_Found2018/01/14(日) 10:58:48.61ID:???
>>121
根本的にUIに沿わない
あくまでselectはセレクトボックス

130Name_Not_Found2018/01/14(日) 11:07:19.12ID:???
そうだね
divでやればいいと思う

131Name_Not_Found2018/01/14(日) 17:04:44.06ID:???
selectはUIじゃないぞ?
UIはブラウザベンダーが決めてる。
HTMLとしてはselectは複数のoptionから選べるってだけの機能
そのUIをどう実装するかは関係ない
またよくある手としてJavaScriptでselectをブラウザ標準から
拡張することもよくある話
なので>>121はselect使うべき

132Name_Not_Found2018/01/14(日) 19:47:02.47ID:???
よくあるかどうかなんて誰も聞いていません

133Name_Not_Found2018/01/14(日) 20:24:34.72ID:???
>>121
そういうのタッチデバイスで意味ないから

>>131
そういうユーザ操作ひっくるめてUIでないの?

134Name_Not_Found2018/01/14(日) 21:37:09.13ID:???
>>131
htmlにもUIはあるんだよ

135Name_Not_Found2018/01/15(月) 17:30:39.34ID:???
>>125
Electron を使えば?

Electronではじめるアプリ開発
~JavaScript/HTML/CSSでデスクトップアプリを作ろう
野口 将人・倉見 洋輔、2017

この本を読めば?

136Name_Not_Found2018/01/15(月) 20:20:56.50ID:???
また売れない筆者か関係者か

137Name_Not_Found2018/01/15(月) 23:54:32.14ID:???
Electronでふと思い出したがVisualstudio codeって使い心地どうすか
俺が描くのってHTMLCSSjQueryだけなんだけど

138Name_Not_Found2018/01/16(火) 13:39:52.43ID:???
>>137
起動がやや重い(Atomよりはマシ)が起動後はスムーズで悪くない

139Name_Not_Found2018/01/16(火) 13:59:29.06ID:???
VS Code で、Windows で、Ruby も楽々。
コンソール画面には、PowerShell

Emmet, SASS, MD やら、これが無料で、笑いが止まらない www

【Microsoft Tech Summit】APP017 PowerShellの新しい相棒 Visual Studio Code
https://www.youtube.com/watch?v=0zo6z0yHrGk

140Name_Not_Found2018/01/28(日) 10:57:06.54ID:???
.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
$('.aaa').removeClass('bbb ccc ddd・・・');

$('.aaa').removeClass().addClass('aaa');
とするのはあり?

141Name_Not_Found2018/01/28(日) 11:09:54.01ID:???
>>140
ええよ

142Name_Not_Found2018/01/28(日) 11:50:24.50ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん

143Name_Not_Found2018/01/28(日) 17:27:37.90ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと

144Name_Not_Found2018/01/28(日) 19:54:44.70ID:???
>>143
$('.aaa').removeClass(function(i, v){
return v.split(' ').slice(1).join(' ');
});
こういう感じでもええんやで

145Name_Not_Found2018/01/28(日) 21:03:38.80ID:???
一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる

146Name_Not_Found2018/01/28(日) 21:58:32.23ID:???
>>145
それが間違ってる

147Name_Not_Found2018/01/28(日) 21:59:16.24ID:???
たしかになんでそんなクラス付け外しするんだ

148Name_Not_Found2018/01/28(日) 22:03:12.50ID:???
>>144
aaaが必ずしも最初に来る保証がない場合は?↓とか

>>145
UI含めてライブラリで勝手に付けられたりするからな

149Name_Not_Found2018/01/29(月) 09:21:25.35ID:???
>>148
で、キミならどうする?

150Name_Not_Found2018/01/29(月) 14:05:15.88ID:???
もいっこ別のクラスをつける、かな・・・

151Name_Not_Found2018/01/29(月) 21:22:55.42ID:???
>>147
ただ記事やブログ書いてるだけならそんないらんよ
ちょっと特殊な場合だな
ヒントだけ書くとスポーツやトラフィックや・・・

152Name_Not_Found2018/01/30(火) 00:27:10.26ID:???
>>148
ライブラリで勝手につけられると言っても
せいぜいbootstrapみたいに btn btn-primary btn-lg active ぐらいなもんだろ?
一つの要素に4つとかそのぐらいの数しかいらない
これもbootstrapのCSSの設計上これだけいるってだけで、
JavaScriptから設定するクラスだとやっぱりそんなにいらないと思う

まあ推測するに

<div data-state="a"></div>
<div data-state="b"></div>
<div data-state="c"></div>
<div data-state="d"></div>

みたいにやればいいのに、classで

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

こんな風にやろうとしてるんでしょ?

だからe, f, g が増えたらリセットするために、e, f, gのクラスを消すように
メンテナンスしなくちゃいけない!ってなってるんだと思うよ。
つまりやっぱり使い方が間違ってる。

前者のやり方であれば、当然data-stateを初期値に戻すだけでいい

153Name_Not_Found2018/01/30(火) 13:03:36.92ID:???
管理が大変って今どうやってて何が大変なのか分からん。

var myTags = 'bbb ccc ddd';
で管理して
$('.aaa').addClass(myTags);
$('.aaa').removeClass(myTags);
$('.aaa').toggleClass(myTags);
とか普通に使うんじゃダメなの?

154Name_Not_Found2018/01/30(火) 19:56:46.12ID:???
何度見てもHTMLの設計に問題がある気がする

155Name_Not_Found2018/01/30(火) 21:22:16.78ID:???
>>153
myTagsをその都度変えるということ?

156Name_Not_Found2018/01/30(火) 21:55:59.13ID:???
data-はクセあるからな

キャッシュの問題
CSSに反映されない
$.hasDataはイベント有無で変わる

classの方が楽で自然に書ける場合はある

157Name_Not_Found2018/01/30(火) 22:15:23.99ID:???
>>153
すでにbbbがあるか否かの判断がめんどくさくね?

158Name_Not_Found2018/01/30(火) 22:19:51.30ID:???
質問はランダムに動的に追加されるclassだけを削除する方法
dataなんて言ってないだろ?w

159Name_Not_Found2018/01/31(水) 01:09:50.36ID:???
>>157
どうでもよくね?
<div class="aaa ccc ddd" />

$('.aaa').removeClass('bbb ccc ddd');
しても
<div class="aaa" />
になるだけだろ?え、俺なんか勘違いしてる??

160Name_Not_Found2018/01/31(水) 01:56:08.51ID:???
>>156
なんか勘違いしてね?

jQueryのdataじゃなくて
data-x属性だぞ

普通にCSSで使える
[data-name=value]とか書けばいい

161Name_Not_Found2018/01/31(水) 02:21:08.91ID:???
.red-text { color: red }
.red-background { background-color: red }

とかしてるんじゃないの?
まあ使いかたが悪いってことだよね

162Name_Not_Found2018/01/31(水) 20:10:35.20ID:???
>>156
あとdata()前後とかな

>>160
ならdata-はいらんがな

163Name_Not_Found2018/01/31(水) 20:48:29.73ID:???
>>159
上にもあったがライブラリのクラスはそれを書かなくてはならない。
つまり仕様が変わると変えなくてはならない。
これは将来的に面倒な要素を残すことになる。

また、仕様変更でeeeが加わった場合にそこも書き直さなくてはならない。

>>140なら自分の初期設定したいクラスだけ書けばいい。

164Name_Not_Found2018/01/31(水) 21:25:25.48ID:???
>>163
静的クラスのほうの仕様は変わらない前提?ならいいんじゃない

165Name_Not_Found2018/01/31(水) 21:52:29.19ID:???
>>161
2個ならず多い場合に、個別に設定=変更する場合ならありじゃないの?
背景色だけ変えるとか

166Name_Not_Found2018/01/31(水) 22:15:20.45ID:???
勝手な憶測書いてそれ前提で否定する人って何が目的なんだろ

167Name_Not_Found2018/01/31(水) 22:28:02.20ID:???
>>162
> ならdata-はいらんがな

HTML5違反をして、独自属性をつけるって話?
そりゃそれならいらんだろうなw だがそこは論点じゃない

classではなく独自の属性を使えという話
classを使うと「値のリスト」にしかならない。classという名前は固定
だからclassに自分の知らない値が入ることを考慮する必要が出てくる

独自属性の場合、「独自属性とその値」になる
独自属性には自分の知らない値は入らないので、classを使うよりも
取扱が簡単になる

168Name_Not_Found2018/01/31(水) 22:30:33.73ID:???
>>166
推測しかできないような
中途半端な書き込みをするなってことだろw

169Name_Not_Found2018/01/31(水) 22:59:49.18ID:???
>>161
横レスだが何が言いたいのかはっきり書いてくれないかな
それだといくつかに取れる

>>168
なら手順的には先ず尋ねるべきだな

170Name_Not_Found2018/01/31(水) 23:04:33.16ID:???
>>169
> 横レスだが何が言いたいのかはっきり書いてくれないかな

クラス名 = スタイル になっているということだよ

171Name_Not_Found2018/01/31(水) 23:05:47.12ID:???
>>169
> なら手順的には先ず尋ねるべきだな

尋ねる前にヒントだけしかかかないような書き込みしてるだろ

>>151
> ヒントだけ書くとスポーツやトラフィックや・・・

ヒントしか言わないやつは推測で答えられても文句は言わない

172Name_Not_Found2018/01/31(水) 23:06:11.96ID:???
文句は言えない の間違い

173Name_Not_Found2018/02/01(木) 09:03:11.33ID:???
>>167
classは、すべての要素に対して使用することが出来る「分類名」
data-は、htmlの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」

勘違いするなよw

174Name_Not_Found2018/02/01(木) 20:23:09.07ID:???
>>168
どう中途半端?

>>140 こういう書き方はあり?(yes|no?)
>>141 yes
単純明快、しかもすでに解決済み。
横から妄想書いてるのがゴチャゴチャ言ってるだけでは。

175Name_Not_Found2018/02/01(木) 20:31:22.31ID:???
妄想とは>>161などな。
すでに論点完全に外れてるからな。

176Name_Not_Found2018/02/01(木) 21:24:32.76ID:???
>>171
ヒントだけってのは俺だがわざわざ書くまでもなく容易に想像できるだろうよ
条件1→aaaの一部の状態を変化(aaa)
条件2→aaaの一部の状態を変化(bbb)
条件3→aaaの一部の状態を変化(ccc)
条件は単なるifだけじゃないぞ
ユーザ入力や関数などな

177Name_Not_Found2018/02/02(金) 00:28:09.06ID:???
>>173
> data-は、htmlの要素に於いて適切な属性や要素がない場合に格納することが出来る「固有の独自データ」
だから独自データだからdata-*使えってことでしょ?何が言いたいのか分からん
data-*の使い方がわからないっていうのならサンプル見つけてあげるよ

https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>
Custom data attributes (e.g. data-foldername or data-msgid) can b
<li data-length="2m11s">Beyond The Sea</li>
<p>The third <span data-mytrans-de="Anspruch">claim</span>
Here, the data-has-payment-request attribute is
<div class="spaceship" data-ship-id="92432"
data-weapons="laser 2" data-shields="50%"
data-x="30" data-y="10" data-z="90">

こういう使い方をする。この要素は「○だ」みたいな言い方ではなく
この要素の「○は△だ」みたいな時にdata-*を使うと良い

一番上の例だと、この要素のtextureはdeep pileだみたいな言い方ね
これをclassに入れて、class="carpet deep-pile" みたいにしてしまうと、テクスチャの種類が増えるたびに
removeClass(ほげ)のほげの種類がたくさん増えて困ってるっていうのが今の話題

「○は△だ」みたいなときはdata-*を使えば良いんだよ
CSSでもdata-*に対してスタイルを設定できる

特に属性セレクタの (https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors より)
> [attr~=value] attr という名前の、値がスペースで区切られた項目リストであり、うち 1 つが正確に "value" である属性を持つ要素を表します。

↑ これはカスタム属性をclassと同じようにスペース区切りの値として使うことを目的として作られたようなもの
(class以外でスペース区切りで値を入れるものなんてないでしょ?)

178Name_Not_Found2018/02/02(金) 00:30:32.60ID:???
だれか >>176 が言ってることを
説明できる人いる?

179Name_Not_Found2018/02/02(金) 08:57:56.34ID:???
>>177
>>140の質問に対しては>>174の通り解決している
根本的に受け答えの問題で質問の主旨を理解しよう

180Name_Not_Found2018/02/02(金) 20:18:57.98ID:???
【悲報】現在自演中の>>141さん、質問主の>>140からは完全に無視されていたwwwww

181Name_Not_Found2018/02/03(土) 09:30:25.90ID:???
>>178
なるほどな、それがわからないからわけわからん書き込みが湧いてるのだな
説明も何もそのままだぞ
逆に何がわからないのか聞けばいい

182Name_Not_Found2018/02/03(土) 09:55:44.12ID:???
やっぱり>>176が言ってることを説明できない=意味不明だから誰も理解できなかったようだね

183Name_Not_Found2018/02/03(土) 10:11:40.72ID:???
理解できてる人もいるのに誰もとはいかに

大雑把な例えだが
役員だけaに変える、新入社員だけbに変える、女性社員だけcに変える
新入社員で女性社員はbとcになる

184Name_Not_Found2018/02/03(土) 10:22:26.33ID:???
はぁ? 説明できる人いる?って聞いただろ
誰も答えてないのになんでいると証明できる?

185Name_Not_Found2018/02/03(土) 10:33:41.17ID:???
>>183でわからないならそれでいいんじゃない
誰も困らないから

186Name_Not_Found2018/02/03(土) 10:34:11.00ID:???
>>183
関係ないけどそんな仕事したなあ

新入社員の名前は明るい緑で、女性の名前は明るい赤でっていわれて
じゃあ女性の新入社員の名前の色はどちらにしますかってきいたら

話きいてた? 明るい緑と明るい赤に決まってるでしょ?

187Name_Not_Found2018/02/03(土) 10:37:12.99ID:???
匿名掲示板しかもIDなしスレで証明とかもうね

188Name_Not_Found2018/02/03(土) 10:39:47.40ID:???
>>183
> 役員だけaに変える、新入社員だけbに変える、女性社員だけcに変える
> 新入社員で女性社員はbとcになる

それがどうしたの?

>>177にも書いているが
「○は△だ」みたいなときはdata-*を使えば良いんだよ
CSSでもdata-*に対してスタイルを設定できる

<span class="person" data-position="officer data-proficiency="newly" data-gender="female">

[data-proficiency="newly"] {
  font-weight: bold;
}

[data-gender="female"] {
  color: red;
}

複数の異なった属性を、属性名をつけずに全部クラスに入れるから
removeClass(ほげ)のほげの種類がたくさん増えて困ってるっていうのが
今の話題だって言ってる

189Name_Not_Found2018/02/03(土) 10:47:27.69ID:???
>>186
あるある
ちなみに補足しておくと以下の場合も考えられる

上書きで後者指定優先(あまりすすまないが)

全て色とは限らず、色形位置などかぶらない状態

全て色でもその社員の同じ位置とは限らない
顔胴体背景、更に擬似要素で別部分


>>188
data-とは話は分岐されている
というかアンカ追え

190Name_Not_Found2018/02/03(土) 10:51:34.29ID:???
アンカ? こんな感じだろ

145 自分:Name_Not_Found[sage] 投稿日:2018/01/28(日) 21:03:38.80 ID:???
一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる
↓↓↓↓↓

147 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 21:59:16.24 ID:???
たしかになんでそんなクラス付け外しするんだ
↓↓↓↓↓

151 名前:Name_Not_Found[sage] 投稿日:2018/01/29(月) 21:22:55.42 ID:???
>>147
ただ記事やブログ書いてるだけならそんないらんよ
ちょっと特殊な場合だな
ヒントだけ書くとスポーツやトラフィックや・・・
↓↓↓↓↓

>>151
> ヒントだけ書くとスポーツやトラフィックや・・・
ヒントしか言わないやつは推測で答えられても文句は言わない
↓↓↓↓↓

176 名前:Name_Not_Found[sage] 投稿日:2018/02/01(木) 21:24:32.76 ID:???
>>171
ヒントだけってのは俺だがわざわざ書くまでもなく容易に想像できるだろうよ
条件1→aaaの一部の状態を変化(aaa)

↓↓↓↓↓

182 自分:Name_Not_Found[sage] 投稿日:2018/02/03(土) 09:55:44.12 ID:???
やっぱり>>176が言ってることを説明できない=意味不明だから誰も理解できなかったようだね

191Name_Not_Found2018/02/03(土) 10:53:42.27ID:???
アンカたどればわかるが、

結局のところ一つの要素に、そんなにクラスを
設定する必要があるってのがそもそも間違いなんだよ。

一つのclassにいろんな属性をごちゃ混ぜでぶち込むから
管理できなくなってるんだろうが。

data-*を使って属性の種類ごとに分ければ良い
異なった属性を全部classに入れるな

192Name_Not_Found2018/02/03(土) 10:57:38.02ID:???
>>191
>一つのclassにいろんな属性をごちゃ混ぜでぶち込む

どれのこと?

193Name_Not_Found2018/02/03(土) 11:03:27.48ID:???
>>192
アンカたどれ
これのことだ

145 自分:Name_Not_Found[sage] 投稿日:2018/01/28(日) 21:03:38.80 ID:???
一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる

もっとたどるならこれのことだ

140 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 10:57:06.54 ID:???
.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
$('.aaa').removeClass('bbb ccc ddd・・・');

$('.aaa').removeClass().addClass('aaa');
とするのはあり?

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと

194Name_Not_Found2018/02/03(土) 11:07:33.86ID:???
$('.aaa').removeClass('bbb ccc ddd・・・');
で一つづつremoveClassするのは大変だからって
$('.aaa').removeClass() してしまうのは
>>142が指摘したとおりの問題が有る


142 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 11:50:24.50 ID:???
>>140
それだと静的に付けたclassまで消えちゃうじゃん



> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて

となるのは、classに複数の異なった属性を属性を入れてしまうから
管理が面倒になるほどの自体になる。
そして>>183もその通りのことをやってしまった。
複数の異なった属性を一つのclassに入れてしまうから
classの値がたくさん増えることになり管理が面倒になる

195Name_Not_Found2018/02/03(土) 11:07:45.44ID:???
>>190
だろっていちいち書くなよ、うざいな
専ブラ使ってないのか?

196Name_Not_Found2018/02/03(土) 11:08:37.19ID:???
>>195
5ちゃんねるの使い方の話は、別件だからおいておこうか?

1971832018/02/03(土) 11:10:46.78ID:???
>>194
全然面倒ではないが何か?
こういう案件自体はあるだろ

198Name_Not_Found2018/02/03(土) 11:12:25.49ID:???
> 全然面倒ではないが何か?

質問者が面倒だって言ってるのに
何を言ってるんだおまえは?

1991832018/02/03(土) 11:13:54.10ID:???

200Name_Not_Found2018/02/03(土) 11:17:38.83ID:???
>>176がわからない→例え>>183
やってしまったもなにもないわな
アンカで追えてないのか話が混ざってる気がする

201Name_Not_Found2018/02/03(土) 11:21:44.57ID:???
>>193それは見てますよ
それのどこが一つのclassになのでしょうか?

202Name_Not_Found2018/02/03(土) 11:24:28.33ID:???
>>199
それ俺が書いたんだけど?

質問者が面倒だって言ってるから、
俺がclassに複数の異なった属性を入れるのがいけないと指摘した
異なった属性を混ぜ込まなければclassにそんなに多くのものを入れることはない
「一つの要素にJavaScriptからそんなに多くのクラスを
設定する必要が有ることがそもそも間違ってる」
最初から質問者に対してそう指摘している

で、おまえは誰?何をやった?

203Name_Not_Found2018/02/03(土) 11:25:13.17ID:???
>>201
> それのどこが一つのclassになのでしょうか?

一つの要素にclass属性は"一つ"しかありませんよw
data-*属性はいくつでも作れますがね

204Name_Not_Found2018/02/03(土) 11:33:17.27ID:???
>>203
>>194に”複数の異なった属性を一つのclassに入れてしまう”と?

ついでに質問いいすか?
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか?
リセットするときどうするのでしょうか?
もし各data-*ごとに消すならaddClassとさほど変わらない気がしますが

205Name_Not_Found2018/02/03(土) 11:36:45.23ID:???
ここで誰?ってw
名前まで入れてるのにな

206Name_Not_Found2018/02/03(土) 11:40:50.91ID:???
それもだが上に出てたライブラリで勝手に〜はどうするんだろうな
むろんdata-*を否定するわけではないが

207Name_Not_Found2018/02/03(土) 12:11:07.34ID:???
>>188
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。
>>188でどう解決するのか。
同じく聞きたい。

208Name_Not_Found2018/02/03(土) 12:31:43.55ID:???
>>204
>>188はdataメソッドでなくattrメソッドで変えるということでしょうか?
そう。attrメソッドで変える。

そもそもdata-*は別にjQueryのdataメソッドのための属性というわけじゃない
jQueryのdataメソッドが先に作られ、HTML5の仕様としてdata-*が作られた
dataメソッドの初期値としてうまく整合性が取れそうだから統合されたが、
もともと関係ないもので、data-*を属性として使うなら、attrメソッドを使う

> もし各data-*ごとに消すならaddClassとさほど変わらない気がしますが

値をグループ化できる。複数の値を週類ごとにまとめたものがグループ
classの場合は値を書くしかないから3つのグループがあって、一つのグループごとに
5個の値があれば、最大15個の値を管理する必要が出てくる
data-*を使えば3つでいい(今は数が多くて管理が大変という話だというのを思い出そう)
グループと値として管理できるのがメリット

また値として排他であってもclassだと値の組み合わせが作れてしまう(例えば、class="black white red yellow")
もちろんこの場合の動きとしては未定義でいいんだが、data-color="black" とかいう使い方なら
他の値が同時に設定されていることを考えなくて済む

>>206
> それもだが上に出てたライブラリで勝手に〜はどうするんだろうな
ライブラリが勝手につけたものは無視すればいい。classという一つの属性を共用して
使っているわけじゃないので、自分以外のことは考えなくて良い

もちろんライブラリでもdata-*を使っていて名前がが被る可能性があるが、
それはclassの値でも一緒の話だし名前の付け方を工夫すればよい

209Name_Not_Found2018/02/03(土) 12:34:14.77ID:???
>>207
>>143で「変更の度にそこも付け加えなくてはならなくて面倒」とある。

値は増えるが、グループが増えることは少ない

それに加え

グループが増えたとしても、既存のコードには影響が出ない

classをつかっていると、既存のコードが参照しているclassに
自分の知らない値が入ったぞ!ということになり
それに対応するのが大変という話だが

data-*だと、既存のコードが参照してないグループ(data-*属性)が
追加されただけなので、既存のコードとは無関係となる

210Name_Not_Found2018/02/03(土) 12:54:54.71ID:???
もうちょっと具体的に話をする

classに全部ぶち込むと、スペース区切りで複数の値を入れることになる。
data-*であればそんなことをしなくて単体の値を指定できる。
っていうことは、

let resetValue = {
 "data-color": "white",
 "data-size": "M",
}

みたいに初期値を書けるってことだよ
これがクラスだと

let resetValue = {
 "white": true,
 "black": false,
 "red": false,
 "blue": false,
 "m": true,
 "l": false,
 "s": false,
 "ll": false,
 // それ以外の知らない値はそのまま変更しない(消してはいけない)
}

としなければいけなくなるということ
そして、色やサイズのパターンが増えたらどうすんの?ということ

ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw
whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw

211Name_Not_Found2018/02/03(土) 13:11:48.31ID:???
ちなみに初期値に設定するのは
$("#id").attr(resetValue)
だけでいいで? attrはハッシュ値を受け付けるからよ

212Name_Not_Found2018/02/03(土) 13:25:20.80ID:???
>>208
グループも何も静的1個(または2個)で済む方法がある>>140
>>142のことはスッキリしない人がいるかもしれんだろうが>>141ならそれでいいんじゃね

213Name_Not_Found2018/02/03(土) 13:29:07.74ID:???
>>141の「ええよ」は、その一つ前のレスの質問者(>>140)へのレスであって
>>142の問題があるけどどうする?に対する「ええよ」じゃないぞ?(時系列注意)

214Name_Not_Found2018/02/03(土) 13:36:55.41ID:???
というか、 >>142で
> それだと静的に付けたclassまで消えちゃうじゃん
という指摘にたいして

> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと

って悩んだ挙句の妥協案じゃんw

それからもっといい案(data-*)が出てるわけでしょ
ほんと時系列注意なw

215Name_Not_Found2018/02/03(土) 13:57:15.50ID:???
んなこたわかってる
そもそも>>140だって元々>>142の問題を承知で書いてる
だからわざわざaaaを付け直してるんだろ

216Name_Not_Found2018/02/03(土) 13:59:01.33ID:???
だがdata-*を使ったもっといいやり方には
気づいていなかった

2172042018/02/03(土) 14:09:59.66ID:???
>>208
おおまかわかりました、が
>他の値が同時に設定されていることを考えなくて済む
はclassでも同じことではないでしょうか?重複する変な付け方してなければ

.aaa {color:}
.bbb {size:}

とした場合>>210
>としなければいけなくなる
の関連がよくわかりません

218Name_Not_Found2018/02/03(土) 14:18:56.48ID:???
もっといいやり方かどうかは質問者が決めること

219Name_Not_Found2018/02/03(土) 15:00:32.75ID:???
>>217
classだとね、<span class="t-sharts red m">
となっている時に、例えばラジオボタンの変更に従って
Tシャツの色とサイズを変更したいって時に
addClass("blue l") だけじゃだめでしょ?
他の値(red m)が残ってしまうでしょ?という話だよ

もちろんこれはバグなんだが、そもそもこうなってしまうのは
classがスペース区切りで複数のクラスを入れるものであるというHTMLの仕様によるもの
data-*だとその縛りがないので単一の値を入れるものとこっちで勝手に仕様を決められる

<span class="t-sharts" data-color="red" data-size="m">
とあるとき、attr({"data-color": "blue", "data-size", "l"}) とするだけでいい


classでやろうとすると >>210みたいな色のリストを持たなければいけない
その他の色やサイズのリストとその初期値をすべて持って置かないといけない

220Name_Not_Found2018/02/03(土) 15:01:56.65ID:???
>>218
質問者 = 初心者 と仮定すると(この仮定は概ね正しい)
初心者がいいやり方を決められる訳がない

221Name_Not_Found2018/02/03(土) 15:05:49.41ID:???
いいやり方は上級者が決める
だがいいやり方は、簡単なやり方とは限らない
いいやり方をするには技術が必要な場合があるからだ
(スポーツとかに置き換えればわかるだろう)

いいやり方をやるための技術力が初心者にはなく
いいやり方を選択できないことも有る。
だがこれは、やり方が良いか悪いかの話ではない

初心者が決めたのは良いか悪いかではなく、
いいやり方を自分がやるかどうかを決めただけ

222Name_Not_Found2018/02/03(土) 15:10:12.79ID:???
>>140の質問を要約すると、

・動的に追加されたclassの削除再追加を一括で行いたいが、
 $('.aaa').removeClass().addClass('aaa'); とするやり方は間違っていないでしょうか?

この質問に対して「あり」以外に答えはない

223Name_Not_Found2018/02/03(土) 15:11:16.38ID:???
>>222
「あり」が間違いなんて誰も言ってない
もっといいやり方があるって話だ

(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

224Name_Not_Found2018/02/03(土) 15:15:36.54ID:???
>>223
もっといいやり方がありますか?
という質問は見当たらないけどw

225Name_Not_Found2018/02/03(土) 15:16:25.44ID:???
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

226Name_Not_Found2018/02/03(土) 15:24:28.07ID:???
○○なことをしたいのですが、いいやり方はないでしょうか?

この質問に対して「ある」「ない」以外に答えはない

227Name_Not_Found2018/02/03(土) 15:27:50.87ID:???
その寄せられた「意見」に対して「不評な意見」が出てるんだよw

228Name_Not_Found2018/02/03(土) 15:30:26.68ID:???
「不評な意見」かどうかは質問者が決めること

229Name_Not_Found2018/02/03(土) 15:38:00.81ID:???
どうして「不評な意見」が出るのか?
ズバリこれねw

230Name_Not_Found2018/02/03(土) 18:55:50.02ID:???
>>220
いや、218はここで他の人が言ってたことだが

231Name_Not_Found2018/02/03(土) 19:20:28.93ID:???
>>219
removeClass()が不要というのはわかるが
他の値(red m)が残っていい場合と、残ってはいけない場合と、その時々による
今回は残ってはいけないとは言ってないが残したくない様子は伺える

<span class="t-sharts" data-color="red" data-size="m" data-material="silk">
の場合結局
attr({"data-color": "blue", "data-size", "l", "data-material". "cotton"})
としないとsilkが残るので同じじゃね?

それとライブラリなど自分でコントロールできないclassも消したい場合
removeClass()のほうが楽に消せるし手っ取り早い

232Name_Not_Found2018/02/03(土) 19:34:38.86ID:???
要は静的に付けたclassは変更しないようにしたいということだから
意図する要素にだけ id でも data でも 静的に付けて於けばどうでもいい事
classでやりたいなら個人の勝手
$(el).removeClass().addClass() は単なるメソッドチェーンなんだから否定するのはおかしい
ただの主観に過ぎない

233Name_Not_Found2018/02/03(土) 19:53:19.81ID:???
苦しいなぁw 頑張ればできると言ってるだけで
やりづらいだけじゃねーか

2342042018/02/03(土) 20:37:15.05ID:???
>>219
詳しくありがとう
でもdata-○○○の○○○は持つ必要があるし(たぶん)
>しなければいけなくなる
理由がいまいちピンときません

それとdata-*でtoggleClassしたい場合どうするのでしょうか?

2352042018/02/03(土) 20:38:42.01ID:???
hasClassもお願いします

236Name_Not_Found2018/02/03(土) 20:39:38.30ID:???
>>234
toggleClass使いたいならclass使えば良いんじゃね?

237Name_Not_Found2018/02/05(月) 10:32:39.54ID:2tyb78tP
上の流れと別件として、読んでで気になったので
>>167の、HTML5違反をして、独自属性をつけるって話?の箇所
data-hogeでなく

HTML <tag hoge=値>
CSS [hoge] {}
jq attr('hoge', '値')

は違反ってことですか?
そのソース(原文)を知りたいです

238Name_Not_Found2018/02/05(月) 12:23:20.23ID:???

239Name_Not_Found2018/02/06(火) 00:03:02.57ID:???
>>238
このタイミングでそういうレスをした意図がわからないが、
一応言っておくと今回の話題ににはそれが使えない

class="a foo" やclass="a bar" とあるとき、 一発で
class="a baz" にすることはできないから

240Name_Not_Found2018/02/07(水) 07:50:22.73ID:???
HTML で、使えるタグ名・属性名は、決まっているだろ

タグ名の所に、そのタグ内で使える、属性名が書いてあるはず

241Name_Not_Found2018/02/07(水) 08:28:25.69ID:???
そもそもdata属性の使い方を勘違い

242Name_Not_Found2018/02/07(水) 23:21:56.08ID:???
>>241
どういうこと?

理由を書いてないから推測するしかないが

1. data-*属性は使ってはならない
 → 使ってもらうために仕様が存在する

2. CSSは属性でスタイルを適用してはいない
 → 適用していいから属性セレクタが存在する

3. data-*属性は値を入れるだけ。CSSの属性セレクタの対象としてはいけない
 → そんなことはどこにも書いてない

4. data-*属性はJavaScriptから読み書きしてはいけない
 → JavaScriptから使わないで何に使うの?CSS用途だけっていいたいの?

5. jQueryではdata-*属性ははdataから使わなければいけない
 → DOM APIのgetAttributesつかってOKなんだから同等のjQueryのattrもOK

243Name_Not_Found2018/02/08(木) 08:23:18.25ID:???
>>242
data属性(カスタム属性)を使うのはその人の勝手
classで用が足せることで本人がそうしたいならその人の勝手
何も間違ってはいないだろ?

244Name_Not_Found2018/02/09(金) 13:03:26.98ID:???
>>242
//css
div[data-hoge="before"]{ background-color: gray; }
div[data-hoge="after"]{ background-color: orange; }
//html
<div data-hoge="before">あいうえお</div>
<input type="button" id="btn" value="cosole" />
//js
$('#btn').on('click', function () {
console.log("静的な値をdata('hoge')で取得: ", $('div').data('hoge'));
console.log("動的に値をattr('data-hoge', 'after')に変更する");
$('div').attr("data-hoge", "after");
console.log("動的に変更した値をdata('hoge')で取得: ", $('div').data('hoge'));
console.log("動的に変更した値をattr('data-hoge')で取得: ", $('div').attr('data-hoge'));
});

data()で参照するとキャッシュされた値を出してくるので動的に変更する場合は注意が必要
attr('data-*')で参照すれば問題はないけどね

245Name_Not_Found2018/02/09(金) 19:48:01.38ID:???
なにそのくそ仕様誰得なの?

246Name_Not_Found2018/02/10(土) 21:24:34.36ID:???
htmlはdata-*で、jqならattrだけでいいんだろ?>>208が言うには

247Name_Not_Found2018/02/10(土) 21:59:45.85ID:???
$(el).attr('style', 'color: red; background-color: black;');
なんて面倒なことやらないだろ?
$(el).css({'color': 'red', 'background-color': 'black'});
こうするだろ?

何のためにjQuery使ってんの?ってこと

248Name_Not_Found2018/02/10(土) 22:28:13.43ID:???
>>243
正論

249Name_Not_Found2018/02/10(土) 23:46:25.77ID:???
>>247
それ好きにすりゃいいレベルの例じゃね?
こんなんまでこっちはまちがいーこっちにしろーとか押し付けられんの?w

250Name_Not_Found2018/02/11(日) 02:21:47.96ID:???
https://w3techs.com/technologies/overview/javascript_library/all

w3techsによると2017年1月の時点で71.9%のサイトが
JavaScriptのライブラリとしてjQueryを使用していることが判明したが
それから1年たった2018年1月現在、73.2%に1.4%も増えていることが判明した。

またAngularは0.5%、だがReactが伸びてきており0.5%
とAngularを逆転したことがわかる

だがjQueryには大幅なさをつけられており取って代わるのは
いつになるのか動向が注目される

251Name_Not_Found2018/02/11(日) 02:26:04.86ID:???
>>245
> なにそのくそ仕様誰得なの?

もともとdata-*属性なんてなかった
jQueryのdataの方が先に作られた

jQueryのdataはdata-*属性を書き換えるものじゃない。
メモリの中に要素に関連づいたデータを持たせるためのもの
だからdata-*属性ではもたせられないようなオブジェクトでも持たせられる
data-*は属性はjQueryのdataの初期値としても使われるってだけの話

そしてdata-*属性は、属性なのだからattrメソッドで操作すれば良い

252Name_Not_Found2018/02/11(日) 02:26:56.76ID:???
>>247
> 何のためにjQuery使ってんの?ってこと

jQueryオブジェクトのためだよ
別にdataメソッドのためじゃない

253Name_Not_Found2018/02/11(日) 02:37:35.15ID:???
>>247
> $(el).attr('style', 'color: red; background-color: black;');
> なんて面倒なことやらないだろ?
> $(el).css({'color': 'red', 'background-color': 'black'});
> こうするだろ?

面倒くさい以前に意味が違ってる。
前者はstyle属性まるまる入れ替え。値を文字列としてそのまま使う

後者はJavaScriptからみたstyleプロパティの値。
既存のスタイルを残して、指定したものだけ置き換えるだけ

例えばこういうHTMLがあって
<span id="id" style="color: #000">red</span>

attrで取得したときは 'color: #000' が返ってくるが
cssメソッドだとcolorの値は 'rgb(0, 0, 0)' となる。

attrとcssは本来は目的によって使い分けるもの
ただstyleの場合、属性として読み書きすることが少ないってだけ

254Name_Not_Found2018/02/11(日) 03:08:31.15ID:???
>>251
大変勉強になりました。くそ仕様とか言ってごめんなさいm(_ _)m

255Name_Not_Found2018/02/11(日) 09:10:48.67ID:???
>>253
>>247はそんなことを言ってるんじゃないだろ?
$(el).css('color', 'red');
$(el).hover(
function(){ $(this).attr('style', 'color: blue;'); },
function(){ $(this).attr('style', 'color: red;');}
);
なんてやらないだろ?ってことだろ

256Name_Not_Found2018/02/11(日) 10:07:14.91ID:???
>>255
だって、それだとstyleについているかも知れない
color以外のものまで変わってしまうじゃん

そういう将来的に不具合の元になるような
ことはやらないよ。それが>>253に書いて有ることだよ

257Name_Not_Found2018/02/11(日) 10:30:59.66ID:???
>>256
attr()は単なる文字列操作
css()はハッシュ関数で値を操作できる
どちらが有利かということだろ

258Name_Not_Found2018/02/11(日) 11:41:09.15ID:???
>>257
違う

attr()はその名の通り要素の属性値を変更するもの
DOM APIで言えばsetAttribute/getAttribute相当のもの

それに対してcss()は、要素の属性値ではなくDOMのstyleプロパティの値を読み書きしている
style属性とstyleプロパティは、そのまま一対一で対応しているわけではない

例えば <span style="background: border-box">と属性で指定した時、
element.style.backgroundColor は initialとなる。属性には何も書いていないのに設定される

さらにcss()による読み込みは単純にstyleプロパティを読み込むだけじゃなく
window.getComputedStyle() を使って最終的なスタイル情報を取得している。

具体的に言うと span { color: red } 、<span style="background-color: blue">
とあった時、attrでは"background-color: blue"としかわからずcolorがredであることは分からないが、
css()ではcolorがred(正確にはChromeではrgb(255,0,0))ということがわかる

またcss()による設定もDOM API的にはelement.style.color = 'red' のような形で実行される
それが最終的に要素の属性に反映されるのだろうがそれはブラウザがやっていることで、どういう属性になるかは不明
例えば .css({borderTop: '1px', borderBottom: '1px', borderLeft: '1px', borderRight: '1px'}) とすると
style="border-width: 1px; border-style: initial; border-color: initial;" となった(Chromeの場合)

またcss()は一部のプロパティに対してはベンダープレフィックスを自動的に追加する機能も持っている

まとめるとattr()は要素の属性をそのまま読み書きするもので、
css()は、読み込みはDOMが解釈した要素の(実際の)スタイルを読み書きし
要素の属性をそのまま読み込んだり反映したりしているわけではない

要素の属性をそのまま変えたいときはattr(), DOMのstyleプロパティとして変えたいときはcss()
使う目的が違っている

259Name_Not_Found2018/02/11(日) 12:46:51.75ID:???
>>251
>data-*属性ではもたせられないようなオブジェクト
とは例えば何でしょうか?
{'plice': '100', 'size': 'L'} のようなオブジェクトならattrメソッドで取得設定できるが関数とかかな?

260Name_Not_Found2018/02/11(日) 12:55:41.36ID:???
>>258
ハッシュ(値)  → 値
属性(名称)  → 文字列

これだけのこと

261Name_Not_Found2018/02/11(日) 12:56:17.76ID:???
>>259
それ、もたせられないよ。

どの要素にも有るグローバル属性のtitleを使って

$('#id').attr('title', {'plice': '100', 'size': 'L'} );
console.log($('#id').attr('title'));

これで試してみ、 [object Object] という文字列になってしまう

JavaScriptのオブジェクトは、文字列ではないので属性値として使えないからね
(正確には強制的にtoString()が呼び出され文字列に変換してしまう)

262Name_Not_Found2018/02/11(日) 12:57:27.23ID:???
>>260
>>258で反論してることを一切無視して
話を戻そうとしても無駄w

お前が言ったそれが間違っていることは>>258に書いた。
それに対して無視すること自体が
お前が間違ってることをお前自身で認めたようなもんだよw

263Name_Not_Found2018/02/11(日) 13:16:02.13ID:???
>>261
なんで変えてるのでしょうか
そりゃtitleには入れられないでしょうからそれならこれで
$('#id').attr({title,: 'hoge', target: '_blank'});

264Name_Not_Found2018/02/11(日) 13:20:22.05ID:???
ようは
$(el).attr('style', 'color: red; background-color: black;');
なんてしないし
$(el).css({'color': 'red', 'background-color': 'black'});
は更に(最終的によほどでないと)しないし、style持ち出すのは話別なんじゃないの、と

265Name_Not_Found2018/02/11(日) 13:36:58.03ID:???
>>263
> $('#id').attr({title,: 'hoge', target: '_blank'});

それは、title属性にhogeという文字列を入れる
target属性に_blankという文字列を入れるという意味で
入れてるのは文字列になってる

俺は属性にオブジェクト入れられないって言ってるの

少しは頭使ったら?

266Name_Not_Found2018/02/11(日) 14:11:45.61ID:???
ひでえ言い方だな
このスレに向かない人なんだな

267Name_Not_Found2018/02/11(日) 14:17:11.47ID:???
だから? 言い方の話にすり替えないように

268Name_Not_Found2018/02/11(日) 14:19:44.44ID:???
それ言ったらこれもだから?だな

>入れてるのは文字列になってる
>俺は属性にオブジェクト入れられない

269Name_Not_Found2018/02/11(日) 14:27:50.35ID:???
つーか、やってみればわかるのにな
priceをpliceと書き間違えるようなやつじゃ無理かw

var hash = {price: 100, size: "L"};

$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}

$('#id').attr('data-value', hash );
console.log($('#id').attr('data-value')); => [object Object]


HTML属性用のattrだと文字列化されるからハッシュを入れることはできない



↓はおまけ。attrだと文字列化されるから数値を入れても文字列に変えられてしまう

$('#id').data(hash);
console.log(typeof $('#id').data('price')); => number

$('#id').attr(hash); // data-を付けずに、price属性、size属性を作ってるからHTML5的には違反
console.log(typeof $('#id').attr('price')); => string

270Name_Not_Found2018/02/11(日) 14:29:07.84ID:???
>>268
attrでは属性にオブジェクトは入れられないよ
>>269で証明済み

271Name_Not_Found2018/02/11(日) 14:53:25.49ID:???
JSONで出し入れすればできる
強引だが

272Name_Not_Found2018/02/11(日) 14:59:04.25ID:???
でそのdata-*やら属性やらが「classよりいい」と関係してるのかね?
toggleClassや他のclassの削除はスルーなんかな

273Name_Not_Found2018/02/11(日) 15:03:19.43ID:???
それはJSONを使ってオブジェクトを文字列にすればって意味なので
属性にオブジェクトを入れてることにはならない

加えてJSON文字列に文字列化(シリアライズ)できないものや
情報が失われてしまうものがオブジェクトに
含まれている場合にもやっぱり対応できない

例えば関数とか日付型とかDOM要素とか。
JSONを拡張して頑張れば、少しはましになるかもしれないけど
DOM要素のシリアライズとかまず無理だろうね

274Name_Not_Found2018/02/11(日) 15:11:51.12ID:???
>>272
> でそのdata-*やら属性やらが「classよりいい」と関係してるのかね?
誤解されるような書き方をするな。わざとか?

> toggleClassや他のclassの削除はスルーなんかな
すでに回答済みだったはずだが?



もう一回書いてやると、
<span class="button color-white size-M">
みたいな書き方をしていて、colorは全12色みたいにもっと色があって
sizeにもS, M, L, LL みたいに複数サイズがあったとする

これをclassを操作して
<span class="button color-red size-l">
のように変えるのは大変。コード側に全ての色を定義して一旦全部
removeClassするか、全てのクラス値を列挙してプリフィックスで見分けるようなコードが必要になる

そういう使い方の場合、data-*属性のほうが、classを使うより良いという話

<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"}) これだけで終わり


こういう話が先にあって、その流れでdata-*やら属性やらが「classよりいい」と言ってる

275Name_Not_Found2018/02/11(日) 16:42:04.87ID:???
propっていう関数もなかったっけ?
あれはどういうときに使うべき?
使い分けの方針を教えてください。

276Name_Not_Found2018/02/11(日) 18:05:31.33ID:???
>少しは頭使ったら?
>priceをpliceと書き間違えるようなやつじゃ無理かw

こういう余計なこと書かなきゃいいのに
それで嫌われてるんだろうな

あ、自分で部下に頼れると自慢してた人かな?w

277Name_Not_Found2018/02/11(日) 18:06:34.20ID:???
頼れる→頼られる

278Name_Not_Found2018/02/11(日) 18:32:26.75ID:???
>>261
$('#hoge').attr({'data-price': '100', 'data-size': 'L'});
alert($('#hoge').attr('data-price'));

「1つの属性に」オブジェクトを入れられないということでいいですよね

>>265
入れられないというか同時設定できるだけということでいいですよね
http://semooh.jp/jquery/api/attributes/attr/properties/

279Name_Not_Found2018/02/11(日) 18:48:22.80ID:???
>>278
> 「1つの属性に」オブジェクトを入れられないということでいいですよね

最初からそう言ってる。属性は文字列しか受け付けられないから
オブジェクトを入れようとしても文字列化される

data()メソッドはもともと要素に紐付いたデータを保存するための仕組みで
オブジェクト等自由に入れることができる。

data()メソッドはdata-*属性と無関係・・・と言いたいところだが
data()メソッドの初期値として利用される。だけどそれだけ。
基本的にはdata()メソッドはdata-*属性を読み書きするものじゃない


> 入れられないというか同時設定できるだけということでいいですよね
複数の属性に同時設定できるという機能を、属性にオブジェクトを代入できると
勘違いしてしまったかわいそうな人がいるという話。

何も言うが属性にはオブジェクト入れられない。入れられるのは文字列だけ。
だからattr()メソッドを使って複数の属性に値を入れようとしても、
入れられるのは文字列だけ。値がオブジェクトだと当然設定することはできない。

つまり
$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
みたいに、属性の値がオブジェクトになっていれば当然入れることはできない

280Name_Not_Found2018/02/11(日) 18:49:59.80ID:???
なるほど、attrで設定できるのは文字列だけってことだな

281Name_Not_Found2018/02/11(日) 18:50:13.94ID:???
>>262
<el data-*= 'value'>
$(el).data('value')
この値の扱いの違い例えてを言ってやって上げてるのに
おまえのオツムでは理解できないみたいだね

282Name_Not_Found2018/02/11(日) 18:52:06.79ID:???
<el data-*= 'value'> ってなんだ?

まさか * がいろんな文字を意味するってことすら
分かってないのか?

283Name_Not_Found2018/02/11(日) 18:53:41.90ID:???
ちょっとかわいそうなんで>>281に教えてあげると

$(el).data('value') で(あくまで初期値としてだが)
読み取るのはdata-value属性
data-*属性ではない。

data-valueという属性の名前になるんだよ

284Name_Not_Found2018/02/11(日) 18:54:49.91ID:???
jQuery良く出来てるわー

285Name_Not_Found2018/02/11(日) 18:59:57.07ID:???
>>279
>>259=>>278ですがどうも
それまでの他の書き込みに惑わされました
pliceは指摘ありがと(きついけど)

286Name_Not_Found2018/02/11(日) 19:03:22.35ID:???
結論としては、attrメソッドは属性に文字列を設定するものだから
当然オブジェクト入れられない、入れようとしても文字列化されるので
実質意味がない。

それに対してdataメソッドは内部的に要素に関連したデータを
持たせる物。だから文字列以外のオブジェクトをもたせることができる
同じdataで惑わされているようだが、attr(data-*)とdata(*)は
本質的には別物

287Name_Not_Found2018/02/11(日) 19:09:41.08ID:???
pliceといえばspliceとsliceでいつも混乱します。どうやって覚えたらいいですか?そもそもスライスは分かるけどspliceってどういう意味ですか?
APIにマイナーな英単語使うなや糞メリケンファック

288Name_Not_Found2018/02/11(日) 19:25:18.18ID:???
>>283
ああ、お前さんも分かっちゃいない

289Name_Not_Found2018/02/11(日) 19:32:37.32ID:???
>>288
わかってるお前が解説しろ

本当に分かってないのはお前だろうからさ

290Name_Not_Found2018/02/11(日) 19:36:41.26ID:???
>>286
>>279
>$('#hoge').attr({'data-price': {yen: 100, doller: 1.2}, 'data-size': 'L'});
>みたいに、属性の値がオブジェクトになっていれば当然入れることはできない
は(私は最初から)okですが、とすると

>>208
>例えば、class="black white red yellow"
なんてことはせず、するなら例えば
class="black m cotton"
である場合、208のグループ化にメリットありますか?

291Name_Not_Found2018/02/11(日) 19:40:12.26ID:???
prop()との使い分けは?ねぇねぇ

292Name_Not_Found2018/02/11(日) 19:58:36.27ID:???
>>291
自分で調べてなかったの?

attrはHTMLの属性を読み書きするもの
propはHTMLの属性ではなくDOMのプロパティを読み書きするもの

DOMのプロパティを読み書きした結果、属性に反映されるかも知れないが
それはブラウザが勝手にやっていること

なので例えばchecked属性が空の時でも、attrで読み取るとundefiendであるが
DOMプロパティ的にはfalseなのでpropを使うとfalseになる

参照先がHTMLの属性かDOMのプロパティかの違いだよ
その点でattr()メソッドとcss()メソッドの関係と似ているね。

293Name_Not_Found2018/02/11(日) 19:59:48.34ID:???
>>290

> なんてことはせず、するなら例えば
> class="black m cotton"
> である場合、


どういう意味? まず日本語

294Name_Not_Found2018/02/11(日) 20:16:26.44ID:???
>>293
>>189のような場合は別として各classがかぶらない
blackはredやgreenになり、mはlやsになり
blackはmがあろうがなかろうが何の値だろうが関係なく、mもしかり

という場合です

295Name_Not_Found2018/02/11(日) 20:18:04.49ID:???
>>292
わーいありがとう

296Name_Not_Found2018/02/11(日) 20:26:48.13ID:???
>>294
> blackはredやgreenになり

それをclassで実現するの大変なんだわ

だって、"hoge black" とかあって、
この内blackだけをredにするわけだろ?

この時、blackとred以外にどんな色があるかは不明とする。
またhogeはhoge以外にもどんなものが来るかは不明とする

この場合に、blackをredにする方法、どういうのがある?

297Name_Not_Found2018/02/11(日) 20:53:15.03ID:???
>>296
私ではありませんが>>153>>140とか
でも前者はmyTagsをいじるのかえって大変ですね

298Name_Not_Found2018/02/11(日) 20:55:48.57ID:???
>>297
そういうこと。それに比べてdata-*属性を使えば
単純な一メソッド呼び出しで完結してしまう

299Name_Not_Found2018/02/11(日) 21:10:54.37ID:???
それが合理的な方法であることは分かったけど>>140には「.aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく」って書いてあるから質問に対する答えになってなくね?
結局>>140に対する回答はどうなるの?

300Name_Not_Found2018/02/11(日) 21:15:39.71ID:???
>>299
回答なら書いてあるじゃん

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個と少ないので楽かなと

301Name_Not_Found2018/02/11(日) 21:24:41.98ID:???
直接的には書いてないけど、つまり>>140の質問に対する答えは「なし」ってことね。

302Name_Not_Found2018/02/11(日) 21:24:49.04ID:???
>>298
でグループ化とは?

>>299
静的に付けたclassが消えるのはいいとしてhasClassどうすんだ?ってなかったっけ?

303Name_Not_Found2018/02/11(日) 21:30:40.83ID:???
>>302
> でグループ化とは?

>>208に書いてあるよ
> 値をグループ化できる。複数の値を週類ごとにまとめたものがグループ
> classの場合は値を書くしかないから3つのグループがあって、一つのグループごとに
> 5個の値があれば、最大15個の値を管理する必要が出てくる
> data-*を使えば3つでいい(今は数が多くて管理が大変という話だというのを思い出そう)
> グループと値として管理できるのがメリット

304Name_Not_Found2018/02/11(日) 21:31:57.45ID:???
>>302
> 静的に付けたclassが消えるのはいいとしてhasClassどうすんだ?ってなかったっけ?

hasClassって、この場合、blackか?redか?greenか?・・・・その他色々な色か?って
ループでぐるぐる回していま何色か調べるってこと?

そりゃ大変そうだな。

305Name_Not_Found2018/02/11(日) 22:57:06.16ID:???
data-*属性をCSSのクラスリストのように使う方法

https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors
> [attr~=value]
> attr という名前の属性の値が空白区切りの語のリストで、その中の1つが正確に value と一致する要素を表します。

↑属性セレクタとしてこれがあるからできるんじゃないかと思ってみたら、
やっぱりできるもんだなぁ。data-*属性でhasClass相当ってこれでいいでしょ?

https://jsfiddle.net/s9epbv2k/
-------- html
<ul>
 <li data-test="foo bar">1</li>
 <li data-test="foo bar baz">2</li>
 <li data-test="foo baz bar">3</li>
 <li data-test="baz foo bar">4</li>
</ul>

-------- css
[data-test~="baz"] {
color: red;
}

-------- js
$('[data-test~="baz"]').on('click', function() {
 alert($(this).text())
})
$('li').on('click', function() {
 alert($(this).is('[data-test~="baz"]'));
})

306Name_Not_Found2018/02/11(日) 23:54:54.27ID:FNzc2dpv
>>269
var hash = {price: 100, size: "L"};

$('#id').data('value', hash);
console.log($('#id').data('value')); // => {price: 100, size: "L"}

ほう、price が数値型か。
ためになった

307Name_Not_Found2018/02/12(月) 08:28:42.43ID:???
立ち返っていうとですね
data属性を使わなくてもidとclassでどうにでもなることだとなんだけどねw

308Name_Not_Found2018/02/12(月) 09:58:07.12ID:???
>>304
全て調べるとは限らないぞ
greenが含まれているか否か、それだけの場合もある

309Name_Not_Found2018/02/12(月) 11:13:06.31ID:???
>>305
孫以下はどうするよ?has使うか?回りくどいな

310Name_Not_Found2018/02/12(月) 11:16:33.87ID:???
>>309
今はhasClassとの違いだったよね?

まずhasClassはこう書けるというのを示してくんない?
hasClassで孫以下はどうするのよ?


それにしても $(this).is('[data-test~="baz"]') は最強だな
セレクタ使うから、$(this).is('span [data-test~="baz"]')
みたいなことまでできるのが容易に思いつく


hasClassで孫以下はどうするのよ?

311Name_Not_Found2018/02/12(月) 15:26:16.07ID:???
セレクタよりなるべくメソッド使いたいもんだな
toggleClassはできそうだが問題は他のライブラリがつけたクラスだな
無視するかはその人次第なのでそうしろとか有り得んわ

312Name_Not_Found2018/02/12(月) 17:03:35.60ID:???
> セレクタよりなるべくメソッド使いたいもんだな

お前の好みなんかどうでもいい

313Name_Not_Found2018/02/12(月) 17:04:47.81ID:???
> 無視するかはその人次第なのでそうしろとか有り得んわ

無視するかはその人次第なので、
そうしろとか有り得んわ
なんて、お前が決めることではない

314Name_Not_Found2018/02/12(月) 17:33:00.27ID:???
そうだな、data-かclassかはお前が決めることではない

315Name_Not_Found2018/02/12(月) 17:38:10.80ID:???
単にこの問題に対してdata-*の方が優れているという
ことを論理的に説明しただけ。

これは決まっている事実を公表しただけ
俺が決めたわけじゃない

316Name_Not_Found2018/02/12(月) 22:52:55.64ID:???
詳細がわからない以上どっちもどっちだろ
どちらが優れていると確定できるわけがない
上で同じようなこと書いてる人がいたが各々好きにすればいいだけ

317Name_Not_Found2018/02/12(月) 23:01:02.40ID:???
>>316
話がごっちゃになってるぞ
最終的に選ぶのが聞いた人であって、
今回の話にdata-*が有利なのは単なる事実だ

318Name_Not_Found2018/02/12(月) 23:02:47.41ID:???
もともとclassでやると・・・の管理が面倒って話だからな
最初っからclassでは大変だっていう自覚はあったわけだ
それをどう解決すべきかがわからずclassで頑張ろうとしていただけで

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと

319Name_Not_Found2018/02/12(月) 23:12:07.25ID:???
data-でもそれはそれで面倒な点があるかもしれんだろうに
解決策は最初からほぼわかってた
ただ確信が持てないので聞いただけだろ

>とするのはあり?

320Name_Not_Found2018/02/12(月) 23:19:01.96ID:???
かも知れないなら、まず最初に質問者に聞くべきだな
自分の想像で、問題あるという前提で話をするのはやめろ

321Name_Not_Found2018/02/12(月) 23:20:27.30ID:???
仕様がこれ以上変わらないなら答えは「あり」
業務アプリ作ってんじゃねーんだぞアホらしい

322Name_Not_Found2018/02/12(月) 23:22:04.86ID:???
> 140
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
$('.aaa').removeClass().addClass('aaa');
> とするのはあり?

> 142
> >>140
> それだと静的に付けたclassまで消えちゃうじゃん

> 143
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと


この一連の流れから明らかだな。
静的に付けたclassまで消えるのが問題だと認識してる。

323Name_Not_Found2018/02/12(月) 23:23:15.97ID:???
>>321
> 仕様がこれ以上変わらないなら答えは「あり」

何言ってんだ?

removeClassが消えるのは嫌だけど・・・が面倒だって話だろ
ならもっといい方法がないか探してるってことだよ

324Name_Not_Found2018/02/12(月) 23:24:56.17ID:???
はっきりさせておこう。

この例では、classを使うよりdata-*属性を使ったほうが良い
ここまではみんなOKだよな

325Name_Not_Found2018/02/12(月) 23:25:12.12ID:???
>>324
OK

326Name_Not_Found2018/02/12(月) 23:26:49.69ID:???
ということは、あとはclassを使うか、data-*を使うかは
質問者が選ぶことだ。

回答者としては、質問者へ回答を書くのみ
classを使った案とdata-*を使った優れた案がでた

この段階でclassを押し付けるのはおかしい

327Name_Not_Found2018/02/12(月) 23:31:25.91ID:???
質問者の >>140>>142 から

> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
ということにたいして

> $('.aaa').removeClass().addClass('aaa');
という回答は

静的に付けたclassが消えるという問題があると
質問者と回答の双方が認識しているわけだ

問題があると認識してる時点で
この質問は「なしだけどしかたないのかなぁ」という話に変わったわけだ

328Name_Not_Found2018/02/12(月) 23:34:53.40ID:???
もし静的に付けたclassが消えてもいいというのなら
>>143は「静的に付けたclassが消えても問題ないです」とい
レスになっていただろう。

だが>143は、消えちゃうんだけど(それを避けようとすると)・・・の管理が面倒になる
という話をしているわけだ。

この流れで、もっと良い案、data-*属性を使ったやり方が出るのは当然だろう

329Name_Not_Found2018/02/12(月) 23:46:44.56ID:???
>>323
>removeClassが消えるのは嫌

捏造しないように
むしろいいかもしれんぞ

330Name_Not_Found2018/02/12(月) 23:48:09.67ID:???
捏造も何もちゃんと書いてあるじゃん

> 142
> >>140
> それだと静的に付けたclassまで消えちゃうじゃん

> 143
> >>142
> そうなんだけど・・・の管理が面倒で

331Name_Not_Found2018/02/12(月) 23:50:57.53ID:???
みなさんいろいろすみません>>140です
こういうの書くと成りすましに見られるから控えていたのですが

>>328
静的に付けたclassは消えても問題ないです
ただのセレクタ役だし、またつければいいだけで

332Name_Not_Found2018/02/12(月) 23:54:49.29ID:???
>>331
バレバレだ。なりすましするな

333Name_Not_Found2018/02/12(月) 23:55:07.69ID:???
顧客が本当に必要だったものワロタwwwww

334Name_Not_Found2018/02/12(月) 23:55:28.16ID:???
>>331
> ただのセレクタ役だし、またつければいいだけで

ただのセレクタ役とは?
またつければいいというのは、どうやって?

335Name_Not_Found2018/02/13(火) 00:12:21.11ID:???
>>332
こういうのがいるから後から書きづらくなるんだよな
スレに悪影響以外何者でもない

>>334
出てるじゃん

336Name_Not_Found2018/02/13(火) 00:14:07.80ID:???
>>330
嫌と書いてないのを君が証明してどうするよw

337Name_Not_Found2018/02/13(火) 00:18:58.36ID:???
>>326
押し付けてるアンカよろ
どっちでもいいは幾つかあるが

338Name_Not_Found2018/02/13(火) 00:21:37.55ID:???
>>335
でてるじゃんじゃなくて、
どこにでてるのかって話だ

>>334
で、ただのセレクタ役とは?
またつければいいというのは、どうやって?

339Name_Not_Found2018/02/13(火) 00:22:33.11ID:???
どっちを使えとか押し付けてはいないな。
ただこの場合はdata-*属性を使ったほうが
シンプルに実装できるってだけの話だ

340Name_Not_Found2018/02/13(火) 00:25:02.39ID:???
確かにいままで出た条件の範囲では
data-*属性のほうが良いかもしれないけど

もしかしたら、明らかになってない条件の中に
data-*属性じゃだめな理由があるかもしれないだろ!
お願いだ。それを誰か書いてくれ
このままじゃ負ける

341Name_Not_Found2018/02/13(火) 00:40:32.31ID:???
負けるとかwww

342Name_Not_Found2018/02/13(火) 00:49:54.45ID:???
なりすましするなら最後まで本人になりきって
質問に答えなきゃだめだろw
中途半端なことをするから余計怪しまれる

343Name_Not_Found2018/02/13(火) 09:14:17.29ID:???
>>140
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?
'.aaa'というセレクタで指定していることから静的に
追加したclassを変更する意図とケースは無いと見られる
後から追加されたclassNameは必ず後に追加されるので
>>144で答えは出ていると思うけどね

344Name_Not_Found2018/02/13(火) 09:15:27.85ID:???
>>343
つまり問題ないってことか
ありがとう

345Name_Not_Found2018/02/13(火) 09:46:47.03ID:???
>>344
条件次第だけどそうだと思うけどね?
jQueryでも古いバージョンにはセレクタのプロパティーがあったんだよね
最近のバージョンではなくなっているけど
$('.aaa').selector // '.aaa'
これを活用してインスタンスメソッドを作成しておくってこともできたんだけど

346Name_Not_Found2018/02/13(火) 09:47:52.64ID:???
何こいつ問題あるかないかにこだわってるんだろう
しかも質問者じゃない人のレスで満足して。
誰かに問題ありませんって言ってほしいだけかよw
承認欲求ってやつだな

347Name_Not_Found2018/02/13(火) 09:51:14.33ID:???
>>343
> '.aaa'というセレクタで指定していることから静的に
> 追加したclassを変更する意図とケースは無いと見られる

静的に追加したclassっていうのを誤解してるんじゃね?
JavaScriptで追加したものじゃなくて、HTMLに書かれた
classって意味だよ。デザインの都合で。

JavaScriptの役目としては、コードで付けたもの以外は
そのまま残しておく。だからremoveClassで全部消えちゃうのは
まずいわけ

348Name_Not_Found2018/02/13(火) 09:52:25.13ID:???
>>345
> これを活用してインスタンスメソッドを作成しておくってこともできたんだけど

こっちはまったく意味不明。何がしたいのかさっぱりわからない。

349Name_Not_Found2018/02/13(火) 10:11:01.08ID:???
>>347
>>144だと全部消えないだろ?
あくまで静的なclassNameは'aaa'での条件
質問の条件に対してことだよ
自己解釈しているのはアンタの方だろ?w
>>348
これは以前のjQueryにおいてのこと

350Name_Not_Found2018/02/13(火) 10:57:12.25ID:???
>>349
だから.aaa以外の静的に付けたものは消えるじゃん
それにそのコードだとaaaが2番目以降に来ると問題が有るし

351Name_Not_Found2018/02/13(火) 10:59:09.70ID:???
> 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、1個とは限らないしね

352Name_Not_Found2018/02/13(火) 11:03:00.53ID:???
>>349
> これは以前のjQueryにおいてのこと

だから以前のjQueryだからって何なんだって話だ
jQuery 1.9.1で実行してみたが、
このように.aaaしか取れない
それで何がしたいのか

<span class="btn aaa">span</span>

alert($('.aaa').selector); // .aaa

353Name_Not_Found2018/02/13(火) 11:07:34.57ID:???
>>350
>>140にはそんなことは書いていないだろ?w
最後に.addClass('aaa')で完結している

354Name_Not_Found2018/02/13(火) 11:11:53.19ID:???
>>352
セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド

355Name_Not_Found2018/02/13(火) 11:13:29.09ID:???
>>353

>>143に書いてあるだろ
勝手に完結させんな

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと

356Name_Not_Found2018/02/13(火) 11:15:01.17ID:???
>>354
> セレクタを参照してそれ以外のclassを削除するというインスタンスメソッド

だから、<span class="btn aaa">span</span>
aaaを参照して静的に書かれたbtnまで削除してしまう
使えないメソッドですねって言ってんだよw

357Name_Not_Found2018/02/13(火) 11:29:04.63ID:???
そもそもselectorを使うってセンス悪いわ

セレクタがIDだったらどうするんだ?
セレクタが属性セレクタだったらどうするだ?
カンマで区切られた複数のセレクタだったら、
親子セレクタ、隣接セレクタだったら?

セレクタがクラスの場合に限り、セレクタに
一致するものを除いて削除するメソッドとか
設計的に気持ち悪い。selectorなくして正解だったな

358Name_Not_Found2018/02/13(火) 11:54:15.83ID:???
>>357
お前らって本当に頭悪いよな余計なことを妄想しすぎ
>>140の回答はだな

$('.aaa').attr('class', 'aaa');

これで良いんだよ
バカ

359Name_Not_Found2018/02/13(火) 11:56:11.30ID:???
>>356
> $('.aaa').removeClass().addClass('aaa');
この結果から他にclassが存在しないだろ
バカ

360Name_Not_Found2018/02/13(火) 12:35:43.21ID:???
>>140で話終わってないだろ

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
>>142
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて
最初つけるclassは1,2個と少ないので楽かなと

361Name_Not_Found2018/02/13(火) 13:09:00.19ID:???
> 最初つけるclassは1,2個と少ないので楽かなと
と書いてある通り、最初につけるclassは.aaaだけとは
限らないことが判明している。

つまり本当はこう言っているわけだ

$('.aaa').removeClass('bbb ccc ddd・・・');

$('.aaa').removeClass().addClass('aaa ・・・');


後者のほうが数が少なくてまだマシということだが、
両方ともやりたくないのは>>143からわかるだろう
(だからこそ>>140しか見ないようにしてるのだろうが)

この2つの・・・の管理をしなくて済むのが
data-*属性を使ったやり方なわけだよ

362Name_Not_Found2018/02/13(火) 14:18:20.70ID:???
>>358
それだと.aaaにデザインの都合で新たなクラスを
追加した時に、そのクラスまで消えてしまいますよね
それを避けるにはどうしたら良いのでしょうか?
なおデザイン側で追加されるクラスはわからないものとします

363Name_Not_Found2018/02/13(火) 16:13:02.54ID:???
>>362
あくまでも>>140の質問に対して率直に回答
結果としては < (elment) class="aaa" ...> にしたいということでしかない
それは質問に対しての回答ではなく、与太話でしかない
完結でしょ?

364Name_Not_Found2018/02/13(火) 16:20:22.09ID:???
>>361
$('.aaa').removeClass().addClass('aaa'); と $('.aaa').removeClass().addClass('aaa ・・・');
でhは全く結果が違うし、解釈も違うことが理解できないみたいだねw

365Name_Not_Found2018/02/13(火) 16:37:46.03ID:???
>>363
ここは質問スレです。私の質問に答えてください

366Name_Not_Found2018/02/13(火) 17:08:53.66ID:???
>>364
> 最初つけるclassは1,2個と少ないので楽かなと

「最初つけるclassは1,2個」の意味を考えましょう

$('.aaa').removeClass().addClass('aaa');
最初につけるclassが2個だとして、これのどこにそれが書いてありますか?

367Name_Not_Found2018/02/13(火) 18:36:38.06ID:???
>>366
$('.aaa').removeClass().addClass('aaa');
       ↑
これのどこに最初のclassの数云々考える必要があるの?
結果は class="aaa" しかあり得ないだろw
>>361がclassが複数あるとか質問に沿わない自己解釈しているから言ってるだけ
なんで必死に絡んでくるのか意味不明

368Name_Not_Found2018/02/13(火) 18:40:19.22ID:???
$().addClass('aaa'); とかしたら
jQueryが「classNameはaaa以外にありませんか?」とか一々聞いてくるのかよw

369Name_Not_Found2018/02/13(火) 18:50:09.93ID:???
「最初つけるclassは1,2個」の意味を考えましょう

370Name_Not_Found2018/02/13(火) 19:25:41.84ID:???
質問を見れば最後は"aaa"のみで完結してるじゃん
これ以上でも以下でもないと思うが外野の勝手な連想で
ただ意味をこじ付けているだけにしか見えない
学校で先生に問題はよく読みなさいと教わらなかったのかな?

371Name_Not_Found2018/02/13(火) 19:30:38.52ID:???
>>140
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?

372Name_Not_Found2018/02/13(火) 20:18:34.50ID:???
>>361
両方ともやりたくないとは言ってないよ

やりたいことは
$('.aaa').removeClass().addClass('aaa'); または
$('.aaa').removeClass().addClass('aaa bbb');

つまりccc ddd・・・を消したいと

373Name_Not_Found2018/02/13(火) 20:31:16.92ID:???
>>332
そういうの荒れるからやめてくれ、マジで
ここ参考になるのに

374Name_Not_Found2018/02/13(火) 21:13:39.59ID:Y812Cm0N
もーめんどくせーから
$(function () {
$(".aaa").each(function () {
$(this).data("originalClass", $(this).attr("class"));
});
}
して、必要に応じて
$(".aaa").each(function () {
$(this).attr("class", $(this).data("originalClass"));
});
するとかw

375Name_Not_Found2018/02/13(火) 21:45:46.50ID:???
>>372
$('.aaa').attr('class', 'aaa'); または
$('.aaa').attr('class', 'aaa bbb');
いわゆる初期化だろw

376Name_Not_Found2018/02/13(火) 21:49:29.59ID:???
>>372
> やりたいことは
> $('.aaa').removeClass().addClass('aaa'); または
> $('.aaa').removeClass().addClass('aaa bbb');
>
> つまりccc ddd・・・を消したいと

$('.aaa').text('').text('aaa bbb');
こんなことやりたいの?

377Name_Not_Found2018/02/13(火) 23:19:16.08ID:???
>>370
ほんとそう思う
自分目線でこうあるべきと勝手に進めてるのが一部

378Name_Not_Found2018/02/13(火) 23:37:29.22ID:???
>370
> 質問を見れば最後は"aaa"のみで完結してるじゃん
あんたの言う最後は>>140のことかな?

>>143でこう言ってるのは無視してるのかな?

> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと

379Name_Not_Found2018/02/13(火) 23:41:09.22ID:???
>>370は問題を最後まで読まないやつだなw

380Name_Not_Found2018/02/13(火) 23:49:19.80ID:???
>>378
>>372

>>379
>>370の通り

381Name_Not_Found2018/02/13(火) 23:54:00.45ID:???
>>379
> >>370は問題を最後まで読まないやつだなw
その通り

382Name_Not_Found2018/02/14(水) 00:01:02.76ID:???
ただの罵り合いで終了

383Name_Not_Found2018/02/14(水) 08:27:10.60ID:???
$('.aaa').attr('class', 'aaa');
 or
$('.aaa').attr('class', 'aaa bbb');

これが理にかなってると思う

384Name_Not_Found2018/02/14(水) 09:15:17.52ID:???
>>383
ただそれだとデザインの都合で
別のクラスが追加された時に
メンテナンスが必要になるんですよね
どうにかなりませんか?

385Name_Not_Found2018/02/14(水) 12:22:19.19ID:???
>>384
> $('.aaa').removeClass().addClass('aaa'); または
> $('.aaa').removeClass().addClass('aaa bbb');

これをやるなら>>383の方がスマートで理論的と俺は見た
理由は最終的には'aaa'(単一)か'aaa bbb'(複数)のクラス名に意図的に置き換えるから
基本に数値にしても結果がわかっているなら num = 10 で良い、無理に nam = x + y などは不要
これはどんな言語でも同じこと

386Name_Not_Found2018/02/14(水) 12:28:37.87ID:???
>>385
デザインの都合でっていう話は完全無視?

<span class="aaa"> とあって、
デザイナーが この部分フォント大きくしたいなとか思って
<span class="aaa hoge"> みたいに変更すると
JavaScriptのコードの変更まで必要になってしまうんだよ

他にもclassってことは複数のaaaがあることが想定されるが
一つは <span class="aaa hoge"> 、もう一つは <span class="aaa hage">
だったりしたら、困るだろ

HTMLはプログラマとデザイナで共有している所だから
お互いに相手に影響を与えないようにしないといけない

387Name_Not_Found2018/02/14(水) 12:49:45.12ID:???
>>386
お互いに相手に影響を与えないようにしないといけないんだったら
気軽にお互いがsourceを都合で勝手に変えるもんじゃないだろw
共有しているのなら連携して修正しないとね

388Name_Not_Found2018/02/14(水) 13:05:22.51ID:???
>>387
連携っていうのは、受け渡しの部分を最小限にして
お互い独立して作業ができるようにすることだぞ

何もかもがお互いに影響していたら
連携というより相手の作業を邪魔することにしかならない

389Name_Not_Found2018/02/14(水) 13:21:26.96ID:???
影響を受けないように気をつけて作るのが仕事なんじゃないでしょうか・・

390Name_Not_Found2018/02/14(水) 13:33:01.69ID:???
そうだね。だからデザイナーがclassに付け足しても
コードは影響がないように作るって話なんだよ
やっとそこ(自分の担当外の仕事)まで考えられる人がでてきたか

391Name_Not_Found2018/02/14(水) 14:25:48.56ID:???
>>386
インスタンスメソッドぐらい作成しろよ
静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ?

$('$.fn.extend({
restoreClass: function () {
let arr = [];
$(this).attr('class').split(' ').map(function (a, b, c) {
a.indexOf('org-') !== -1 ? arr.push(a) : void 0;
});
return $(this).attr('class', arr.join(' '));
}
});

$('.org-aaa').restoreClass();

392Name_Not_Found2018/02/14(水) 14:27:19.30ID:???
誤:$('$.fn.extend({
正:$.fn.extend({

393Name_Not_Found2018/02/14(水) 14:31:24.34ID:???
>>391
> 静的に追加したclassNameには 'org-' など任意の文字列を埋め込んでおいたら問題ないだろ?

> それは俺が>>210で提示したやり方ですね?
そんなコードを書くのが無駄だと言ったコードを
わざわざ書くとはw

> としなければいけなくなるということ
> そして、色やサイズのパターンが増えたらどうすんの?ということ
>
> ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw
> > whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw

394Name_Not_Found2018/02/14(水) 14:35:24.91ID:???
>>393
デザインの都合でで使うクラス名の管理はデザイナーのお仕事ですw

395Name_Not_Found2018/02/14(水) 14:37:33.17ID:???
>>391
それから、それ気持ち悪いコードですね。
インスタンスメソッドというから何かと思えば
jQueryプラグインですか? ならjQueryプラグインの書き方で書きましょうよw

なってない。手本を見せてあげましょうか?

それからほれjQueryプラグインの作り方
https://learn.jquery.com/plugins/basic-plugin-creation/

396Name_Not_Found2018/02/14(水) 14:38:25.72ID:???
>>394
はい?ですのでデザイナーに任せてデザイナーが
何をしようとコードには影響を受けないようにすべきですね。

397Name_Not_Found2018/02/14(水) 14:41:22.14ID:???
じゃ、自由に任意の文字列を投げるようにしたらいいんじゃないの?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-');

398Name_Not_Found2018/02/14(水) 14:43:23.67ID:???
>>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>

399Name_Not_Found2018/02/14(水) 14:45:29.61ID:???
>>397
俺ならこうするなぁ。まdata-*属性使いたくないんでしょw
もしくは最初の初期化時にdata()メソッドで初期クラスを保存するとかね

<span class="aaa" data-original-class="aaa">span</span>

400Name_Not_Found2018/02/14(水) 14:51:59.06ID:???
>>399
それそれ、人の意図だからそれで良いと思うよ
data属性はあくまで適切な属性や要素がない場合を想定したものなので
classで賄えるんだから俺はclassを使用することを推薦するよ

401Name_Not_Found2018/02/14(水) 14:55:02.21ID:???
>>398
それはね、Bugといよりそのケースには未対応ってことなんだよ
サクッとインスタンスメソッドを作っただけなのでそれは筋違い

402Name_Not_Found2018/02/14(水) 14:57:40.74ID:???
あ、はい、バグだと指摘されたら「仕様です」ですねw

403Name_Not_Found2018/02/14(水) 14:59:07.57ID:???
はい、まともなコードに直してあげましたよ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();

404Name_Not_Found2018/02/14(水) 15:03:53.87ID:???
ごめん、訂正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();

405Name_Not_Found2018/02/14(水) 15:07:09.57ID:???
そして、最新のブラウザだけで動けば良いコード

$.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();

406Name_Not_Found2018/02/14(水) 15:12:19.54ID:???
別解

$.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();

407Name_Not_Found2018/02/14(水) 15:16:01.43ID:???
>>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();

408Name_Not_Found2018/02/14(水) 15:17:43.10ID:???
>>401
> それはね、Bugといよりそのケースには未対応ってことなんだよ

jQueryのプラグインの形式として使えるくせに、
jQueryで使えるセレクタを使ったら正しく動かないのはバグだよ

それなら関数にしたほうがまだマシ

409Name_Not_Found2018/02/14(水) 15:21:59.42ID:???
data-*属性使えばシンプルに解決できる問題なのに、変な仕組みを作って
コードを書いたのは良いが、バグありで
map使ってるくせに戻り値を利用せず、条件に応じてpushかするような
コードを書くようじゃぁ、まだまだ初心者ですね。考え方もコードも ┐(´ー`)┌ヤレヤレ

410Name_Not_Found2018/02/14(水) 15:36:24.95ID:???
建設的なレスをしないのに限ってああだこうだ言うんだよね

411Name_Not_Found2018/02/14(水) 15:39:59.97ID:???
>>409
class名できることをdata-*属性の方がシンプルだとか頭悪そうだよな
ワロタ

412Name_Not_Found2018/02/14(水) 15:41:46.32ID:???
jQuery 仮想質問に答えて罵るスレッド
この方がこのスレに合ってると思う

413Name_Not_Found2018/02/14(水) 15:47:11.27ID:???
>>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個と少ないので楽かなと

聞いてみたら↑案の定こういうレスが返ってきたわけで、
使い方間違ってるなーという話さ

414Name_Not_Found2018/02/14(水) 17:13:31.22ID:???
>>408
ツッコミどころをわざと作ってやってんだよ
その方が楽しいだろ?
案の定、必死に噛み付いて来てるしw

415Name_Not_Found2018/02/14(水) 17:20:41.61ID:???
ツッコミどころをわざと作ってやってんだよ

416Name_Not_Found2018/02/14(水) 17:22:30.95ID:???
>>413
> $(…).attr({"data-color": "red", "data-size": "L"}) これだけで終わり
コーヒー噴いたじゃないかよwww
それってね結局はこれと一緒
$(…).css({"color": "red", "font-size": "large"})
単にプロパティーを変更しているだけなんだけどw
脳内で満足してるだけ

417Name_Not_Found2018/02/14(水) 17:28:32.81ID:???
>>416
いや、服の色が赤で、サイズがLって意味だけど?
MとかLとかSとかLLで気づかないかね?

418Name_Not_Found2018/02/14(水) 17:33:57.29ID:???
ツッコミどころをわざと作ってやってんだよ?

419Name_Not_Found2018/02/14(水) 22:34:50.81ID:???
>>383
動的にということだから他の部分でも〜Classメソッド使ってると思われ
その流れでremove/addClassの方が自然なような

420Name_Not_Found2018/02/14(水) 22:41:12.66ID:???
>>413
それtoggleClassは?在庫有無だけとか

421Name_Not_Found2018/02/15(木) 08:44:13.60ID:???
>>420
だからclassを使うのが間違ってるわけだから
そもそもtoggleClassもいらんのだよ。
単にdata-*属性に値を入れるだけ

422Name_Not_Found2018/02/15(木) 08:48:25.05ID:???
data-zaiko=true
data-zaiko=false
とかね

423Name_Not_Found2018/02/15(木) 09:11:14.96ID:???
>>421
間違っていることはないよ
どちらを使っても良いんだよ
脳内の問題

424Name_Not_Found2018/02/15(木) 09:21:21.79ID:???
classっていうのは種類って意味だよ。
一つの要素がそんなに複数の種類になることなんてない。
通常は種類は一種類。OOCSSなんかは複数のスタイルで
継承関係を表しているだけで種類は一種類

activeとかdisableなんてのも本来はclassの用途としては
間違っている。実際input要素とかは別の属性だしね

悪影響がないならclassを使ってもいいけど
真偽値のみに留めておくのが良い

やりにくくなったらdata-*属性を使ったほうが良い

425Name_Not_Found2018/02/15(木) 09:53:16.57ID:???
継承関係を表しているだけで種類は一種類?
class="dog male"
class="cat female"
種と性別はどっちがどっちを継承してるの?
本来はclassの用途としては間違っているってdata-の仕様が出来るまではみんな間違ってたってこと?

426Name_Not_Found2018/02/15(木) 10:01:05.35ID:???
> 種と性別はどっちがどっちを継承してるの?

自分で書いてるじゃん。

class=種類は「種」だよ。
性別は属性

427Name_Not_Found2018/02/15(木) 10:15:39.40ID:???
人間ならmaleとfemaleと見ただけで、それが性別であることはわかるだろうけど、
コンピュータから見れば、わからないからね。

各順番を片方逆にしていたら、

class="dog male"
class="female cat"

片方は dog で片方は female という種なんだと
認識してもおかしくない

これがプログラミング言語であれば、
var class = "male" なんてコードは書かないだろう

428Name_Not_Found2018/02/15(木) 11:36:40.10ID:???
長いだけで中身空っぽだぞ

429Name_Not_Found2018/02/15(木) 11:49:16.64ID:???
性別は属性って言ったって、data-できる前<div sex="female">と書いていたのか?
class使ってたんじゃないの?本来野郎はそこ説明しろよ。

430Name_Not_Found2018/02/15(木) 12:08:30.91ID:???
>>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使っていなかっただろ!とか
一つしか指定してなかっただろ!とか言うことに何か意味があるのか?

431Name_Not_Found2018/02/15(木) 13:32:31.76ID:???
>>424
class属性は種類というより部類。例えば、aaa と bbb と ccc という種類がある
'aaa ccc' or 'bbb ccc' は種類によって分けた部類となる
HTMLは論理要素は意味を持つが物理要素は外見だけなので何の意味もなく
個々の意図でしかない

432Name_Not_Found2018/02/15(木) 13:57:24.07ID:???
うんうん、それで?

433Name_Not_Found2018/02/15(木) 14:10:26.80ID:???
無意味ってことだろうな

434Name_Not_Found2018/02/15(木) 15:06:02.39ID:???
classify分類する
classification分類
class = ???

435Name_Not_Found2018/02/15(木) 15:22:14.61ID:???
>>434
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13146534943

> 分類することがclassification。分類された各区分がclass。

だってさ

436Name_Not_Found2018/02/15(木) 16:27:26.93ID:???
そっか。

437Name_Not_Found2018/02/15(木) 21:23:58.79ID:???
ここ面白いな、。次のスレタイはこれで。
質問者の質問を元に自分で勝手に変更解釈して自分で答えを書くスレ。

438Name_Not_Found2018/02/16(金) 07:20:29.85ID:???
まだやっていたのか
静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる
WeakMapを使えば良いだけ

439Name_Not_Found2018/02/16(金) 09:08:20.37ID:???
>>437
ちがうよ
質問をお題に知識をひけらかしてマウントとるスレ
だろ

440Name_Not_Found2018/02/16(金) 10:01:31.15ID:???
>>438
まだやってるのはお前だけdata-*属性を使うことに対して異論は出てない
更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい
ということだろうから、data-*属性ならば属性セレクタで対応は可能だが
WeakMapを使った場合は実現できない

441Name_Not_Found2018/02/16(金) 14:50:50.13ID:???
<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 の一つ前の要素を
取得したいのですがやり方間違っています?

442Name_Not_Found2018/02/16(金) 14:52:09.98ID:???
>>444ですがhtmlにゴミが入っていましたのでこれになります
<ul class="aaa">
<li>リスト0</li>
<li>リスト1</li>
</ul>
<ul class="bbb">
<li class="selected">リスト2</li>
<li>リスト3</li>
</ul>

443Name_Not_Found2018/02/16(金) 21:14:40.51ID:???
>>421
それは意味が違うし、するにしても面倒
toggleClassは(引数なしなら)今の値の逆、つまり今の値が何かは関係ない
422だとこうなる
今の値取得->逆->設定

444Name_Not_Found2018/02/16(金) 21:19:11.57ID:???
> 今の値の逆、つまり今の値が何かは関係ない

矛盾しとるんだが?

445Name_Not_Found2018/02/16(金) 21:20:56.93ID:???
それにtoggleClass(引数なし)は

jQuery 3.0でdeprecated
https://api.jquery.com/toggleClass/#toggleClass2

もう使うなよ?

446Name_Not_Found2018/02/16(金) 21:21:53.07ID:???
>>439
うん、それもあるな
しかもその知識は質問者の都合無視

447Name_Not_Found2018/02/16(金) 21:23:54.46ID:???
>>444
全然しとらんやんけ
現在値を気にする必要ない

448Name_Not_Found2018/02/16(金) 21:27:16.18ID:???
今の値の逆だろ?
今の値の

449Name_Not_Found2018/02/16(金) 21:31:23.41ID:???
redの逆って何?青になんの?
じゃorangeだったら???

450Name_Not_Found2018/02/16(金) 21:33:57.28ID:???
toggleClassは(引数なしなら)今の値(red)の逆、つまり今の値が何かは関係ない

451Name_Not_Found2018/02/16(金) 21:36:42.96ID:???
> 今の値(red)の逆、つまり今の値が何かは関係ない

何このなぞなぞ
狐につつまれたような気分だ

452Name_Not_Found2018/02/16(金) 21:41:32.05ID:???
わかってるのにくだらない突っ込み多すぎ
redの追加削除

453Name_Not_Found2018/02/16(金) 21:45:31.86ID:???
今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない
誰でもすぐ分かるのにもうマウントに必死すぎて笑えるわ

454Name_Not_Found2018/02/16(金) 21:47:27.66ID:???
それが

<span class="aaa bbb ccc ddd ・・・">

<span class="aaa">

にする話と何が関係有るのでしょうか?

455Name_Not_Found2018/02/16(金) 21:49:14.25ID:???
今の値が何かは関係ないということは
ありでもなしでいいわけですよね?

<span class="">← なしです
なしの時にtoggleClass(引数なしなら)を実行したら
なんになるのでしょうか?

456Name_Not_Found2018/02/16(金) 21:50:41.94ID:???
>>449
赤の逆色は青じゃない、緑
マンセル色相環

457Name_Not_Found2018/02/16(金) 21:52:25.10ID:???
>>453
そんなにマウント取られたって言うのは可愛そうじゃね?
本人はマウント取られてないつもりかもしれんじゃん
わざわざあんたいまマウント取られたんだよって教えてあげるとかw

458Name_Not_Found2018/02/16(金) 22:07:33.09ID:???
スマンここは間違えた
酔っ払ってたわ
引数ありなら、ね

459Name_Not_Found2018/02/16(金) 22:14:59.21ID:???
酒のせいにして何もかも間違っていたと言っていたほうが良いよ?
何一つあってないんだから

460Name_Not_Found2018/02/16(金) 22:15:18.00ID:???
>>450
> 今の値(red)の逆、つまり今の値が何かは関係ない

>>453
> 今の値とは有無のこと、あるなしが逆ということ、値が何かは関係ない

????
今の値は(red)なの?
有無のこと、あるなしのことなの???
redと有無って同じなの???

461Name_Not_Found2018/02/16(金) 22:25:11.56ID:???
次のスレタイ=マウント取りたくてウズウズしているスレ

462Name_Not_Found2018/02/16(金) 22:26:17.03ID:???
もうここまでくるとキ○ガイだな>>460

463Name_Not_Found2018/02/16(金) 22:27:35.74ID:???
まあぶっちゃけマウントは取られる方が悪い

464Name_Not_Found2018/02/16(金) 22:28:11.72ID:???
>>462
間違えたの恥ずかしいの?

465Name_Not_Found2018/02/16(金) 22:30:40.82ID:???
マウント取られて悔しいのはわかるが、
マウントを避難するんじゃなくて

↓これをtoggleClassでどうしたいのかをさっさと書けばいい

<span class="aaa bbb ccc ddd ・・・">

<span class="aaa">

既出の話題ならはいらんぞ
・・・の管理が面倒くさいって話だからな

466Name_Not_Found2018/02/16(金) 22:34:45.03ID:???
>>461
ただの揚げ足取りでマウントすらになってない

467Name_Not_Found2018/02/16(金) 22:35:59.15ID:???
だから必死にマウントを非難してるんじゃないよw

468Name_Not_Found2018/02/16(金) 22:38:31.83ID:???
>>440
> 更に言うならばclassに使うということはCSSで何かしらのデザインを与えたい
ということだろうから
勝手に妄想で「静的につけたclassが動的処理で消える問題」と無関係な条件を付けて、あなたの思う方向に結論を向けられても困る
属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか

469Name_Not_Found2018/02/16(金) 22:39:08.10ID:???
> 属性で対応したら「静的につけたclassが動的処理で消える」ことも分からないのか

わからんね。具体的に説明してみな

470Name_Not_Found2018/02/16(金) 22:40:32.55ID:???
なお、静的に付けた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個と少ないので楽かなと

471Name_Not_Found2018/02/16(金) 22:41:45.48ID:???
>>465
toggleClass('bbb');
toggleClass('ccc');
toggleClass('bbb ddd');
じゃね

472Name_Not_Found2018/02/16(金) 22:43:48.12ID:???
>>471
そうすると、bbbとかcccとかdddとかが増えるたびに
メンテするのが面倒くさいっていうのが本題です

473Name_Not_Found2018/02/16(金) 22:46:06.59ID:???
ちなみに
静的に付けたclassが消えてしまうことは問題でもなんでもない
承知でやってること

474Name_Not_Found2018/02/16(金) 22:47:30.41ID:???
承知でやっているがもっといい方法ないかなーってこと。

475Name_Not_Found2018/02/16(金) 22:47:31.65ID:???
>>473
それは質問者の発言と矛盾します。

476Name_Not_Found2018/02/16(金) 22:48:16.75ID:???
>>472
面倒は初期だけのことでeeeが増えてその処理(toggleClass('eee')など)が増えることは当たり前で面倒でもなんでもない

477Name_Not_Found2018/02/16(金) 22:48:49.12ID:???
>>475
いや質問者なんですけど

478Name_Not_Found2018/02/16(金) 22:51:02.68ID:???
>>477
じゃあ、data-*属性のどこが問題かの話を何故しないのですか?
もっと優れたやり方(data-*属性)を提示したんだから
もうclassに拘る必要ないでしょ良いでしょw 

はいはい、classわすれたー
data-*属性でいきましょうー

479Name_Not_Found2018/02/16(金) 22:51:50.08ID:???
>>476
じゃあお前はそこで議論から外れてください。

480Name_Not_Found2018/02/16(金) 22:51:58.57ID:???
>>469
属性なんだから、いくらでもremoveClassやsetAttributeで干渉できるだろ

481Name_Not_Found2018/02/16(金) 22:54:19.89ID:???
>>480
干渉できるから何?

482Name_Not_Found2018/02/16(金) 22:55:36.03ID:???
>>478
ありかなしか、次のレスで解決してるのでけっこうです
でも参考になりましたわ

483Name_Not_Found2018/02/16(金) 22:57:06.06ID:???
よい方法だろうがなんだろうがゴリ押しdataくんが大嫌いなのでdataは絶対使いません!

484Name_Not_Found2018/02/16(金) 22:58:38.21ID:???
>>481
静的につけたclassが動的処理で消える

485Name_Not_Found2018/02/16(金) 23:00:35.81ID:???
482の追記
data-属性はcssからめて別では使ってます
どうもでした

486Name_Not_Found2018/02/16(金) 23:02:10.82ID:???
>>484
じゃあclassを動的処理で消している部分をなくせば問題ないってことですよね。

=class使うなってことです。

487Name_Not_Found2018/02/16(金) 23:02:11.39ID:???
>>479のじゃあがよくわからん

488Name_Not_Found2018/02/16(金) 23:07:21.07ID:???
>>486
属性を使うのを止めれば良い
お前が>>440で見当違いの事を言ってたから反論しただけなんだが、自分の間違いも認められないとは

489Name_Not_Found2018/02/16(金) 23:09:02.58ID:???
>>487
面倒だから解決方法を探してる
面倒じゃない人はお前ん中では面倒じゃないんだから
お前ん中の世界にいればいいって話

490Name_Not_Found2018/02/16(金) 23:10:18.31ID:???
>>488
classも属性ですが?
属性を使うな、何を言ってるのでしょうか。

classが動的処理で消えるというなら、
data-*属性を使ってclassに一切触らなければ
classが消えることはありません。

反論どうぞ

491Name_Not_Found2018/02/16(金) 23:13:06.03ID:???
>>490
>>438を100回読み直せ
読解力が無さ過ぎてあきれる

492Name_Not_Found2018/02/16(金) 23:16:20.92ID:???
> data-*属性を使ってclassに一切触らなければ
data-*属性も動的処理で消せるだろ
アホなのか、こいつは

493Name_Not_Found2018/02/16(金) 23:16:57.84ID:???
>>491
読み返した所で>>438が馬鹿だとしか思えませんが?

なぜかって?classが動的処理で消える問題とか言ってるから馬鹿なんですよ。
classがremoveClass()でいっぺんに消した時に全部消えてしまうって話なんだから
data-*を使えばremoveClass()を使ったとしても消えることはない
そもそもclassを使わないのだからremoveClass()自体不要

>>438が馬鹿な理由わかりますか?この話をしてるのに
JavaScriptから消す方法があるの話を勘違いしてるんですよ
バカ以外の何物でもないでしょう

何か反論は?

494Name_Not_Found2018/02/16(金) 23:17:32.27ID:???
> data-*属性も動的処理で消せるだろ

墓穴ほってるよなーw

動的処理で消せること自体は問題にしてないのにwww

495Name_Not_Found2018/02/16(金) 23:23:18.17ID:???
>>438は問題に対する解を持っている
data君は問題とは思っていないし、全く別のベクトルで問題を指摘してる
お互いに問題とは思っていないのだから、平行線なのは当然の事
だが、data君は>>438が導き出した答えの意味を理解してないだろうな

496Name_Not_Found2018/02/16(金) 23:24:43.18ID:???
>>495
じゃあ理解してるお前が説明してみせたら?
そしたら逃げるんだよなーw

497Name_Not_Found2018/02/16(金) 23:28:06.66ID:???
data君が気が付いてない問題は、スコープでしょ
属性は公開されているわけだし、その答えに行き着くのは理解できるけどね

498Name_Not_Found2018/02/16(金) 23:29:53.34ID:???
誰かここでスコープが関係してくる理由説明できる?誰もできないと思う

多分こいつ、自作自演してる。書いた本人だわ
自分にしか通じないことしか言ってない

499Name_Not_Found2018/02/16(金) 23:32:30.76ID:???
まさか、変数のスコープを知らない御仁がいるとは

500Name_Not_Found2018/02/16(金) 23:35:27.92ID:???
今の属性の話に変数のスコープは関係ないからねw

関係あるというのなら、どういうふうに関係があるのか
説明してもらおうか。変数のスコープの説明じゃないぞ
変数のスコープが今回のclass属性の代わりにdata-*属性を使うと
管理しやすくなるという話にどう関わってくるのかの説明だ

501Name_Not_Found2018/02/16(金) 23:37:39.77ID:???
解決してるのに解決してないと言い張ってどうしてもそれを使わないと納得がいかないスレ

5024382018/02/16(金) 23:40:18.11ID:IDQ8lYl5
何とも、面倒くさい奴だな
WeakMapを使ってコードを書く場面を想定しろ

> 静的につけたclassが動的処理で消える問題
静的処理とは別に動的処理だけで参照できる場所にデータを持てばよい
WeakMapで作られた変数のスコープはグローバルスコープにしなければ、外部から干渉されない
当然、静的処理でマークアップされたclass属性やdata-*属性と衝突する事もない
属性はDOM APIによって開けた環境にあるので、いくらでも外部干渉を受ける
つまり、属性は静的処理と動的処理が衝突してしまうという事だ

503Name_Not_Found2018/02/16(金) 23:45:55.47ID:???
>>502
じゃあ属性を使わずそのWeakMapを使って
cssで色をつける方法を書いてください

504Name_Not_Found2018/02/16(金) 23:47:10.72ID:???
ちなみにdata-*属性を使った場合はこう書きます

[data-hoge="foo"] { color: red }

505Name_Not_Found2018/02/16(金) 23:48:28.73ID:???
data君がどう言い訳するのかと思ったら、「論点のすり替え」か

506Name_Not_Found2018/02/16(金) 23:48:55.20ID:???
classの代わりとして使えないんじゃ、意味ないですからね

507Name_Not_Found2018/02/16(金) 23:50:04.42ID:???
論点は最初からclassの代わりとして使えることが条件ですが?

508Name_Not_Found2018/02/16(金) 23:50:17.89ID:???
>>498
スコープ君は質問者ではないよ
おれもなぜスコープが出てくるのかわかりませぬ

509Name_Not_Found2018/02/16(金) 23:50:46.54ID:???
結局、変数のスコープで合ってるじゃん
自分で気が付かなかった事実を認めたくないから話題を逸らしてるんでしょ

510Name_Not_Found2018/02/16(金) 23:53:18.48ID:???
たぶん、data-*属性と聞いて、jQueryのdata()メソッド、要素に紐付いたデータを持たせたい
という話と勘違いしちゃったんでしょうねw

そんな話はしてない。もともとclassを使おうとしていて、管理が面倒くさい
どうにかならないかって話で、data-*属性をつかえばいいという流れ
data-*属性はclassの代替として使用できる。そして管理が楽になる
(classは名前無しで値しか入れられないが、data-*属性は、data-名前=値という組みで入れられるから)

511Name_Not_Found2018/02/16(金) 23:54:29.90ID:???
>>509
> 結局、変数のスコープで合ってるじゃん

日本語怪しい。わざと曖昧なことを言って論点をすり替えようとしている。

変数のスコープで何があってるのか。
そして今回の話にどう絡んでくるのか言ってみ

classの代替としてWeakMapが使えないのはすでに証明済み

512Name_Not_Found2018/02/17(土) 00:00:13.27ID:???
WeakMapを使う時点で変数に格納するのは分かり切っているんだが

513Name_Not_Found2018/02/17(土) 00:01:31.24ID:???
WeakMapを使う時点ってなんのこと?

class属性の代替としてdata-*属性を使うと管理が簡単だよ
CSSでも属性セレクタで使えるし

って話の中に、いきなり無関係のWeakMapがでてきたんでしょ?
WeakMapを使う"時点" なんてものは存在してない

514Name_Not_Found2018/02/17(土) 00:02:46.23ID:???
>どうにかならないか

まあ質問者はそんなこと言ってなくて回答者が勝手に作って話進めてるだけなんだけどなw

515Name_Not_Found2018/02/17(土) 00:03:32.57ID:???
言ってますがなw

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個と少ないので楽かなと

516Name_Not_Found2018/02/17(土) 00:04:22.20ID:???
は?言ってないじゃんw

517Name_Not_Found2018/02/17(土) 00:05:21.13ID:???
質問者はありかなしかだけ
そのだいぶ後に追記してるだけ

5184382018/02/17(土) 00:06:10.14ID:LqHG2ZTu
俺は質問者ではないよ
ただの傍観者で「WeakMapを使えばいいのに」と思ったから横から口をはさんだだけ
少なくとも、>>438の問題はCSS適用外の仕様で考えているから、>>440>>503に対しては「何を頓珍漢な事を」ぐらいにしか思っていない
元々、静的処理とは別のスコープを持つことを意図しているわけで、CSSが適用できないのは当然の事だ

何か知らんが、俺が取り上げている問題を無視して、俺が取り上げてもいない問題を勝手に持ってきて反論してくるから、正直疲れる
読解力がないというよりも読む気が無くて、自分の考えしか頭にないタイプなのかね

519Name_Not_Found2018/02/17(土) 00:11:56.14ID:???
言ってないなw

520Name_Not_Found2018/02/17(土) 00:21:55.44ID:???
>>513
静的につけたclassが動的処理で消える問題

521Name_Not_Found2018/02/17(土) 00:28:50.25ID:???
質問を自分仕様に変えて自慢げに書くスレ
質問者が言ってもいないことを言ったと言い張るスレ

522Name_Not_Found2018/02/17(土) 00:32:42.55ID:???
質問者が問題としてないことを問題として扱うスレ

ま、これはいいか
「こういう仕様ならこういう方法もあるよ」くらいなら

5234382018/02/17(土) 00:35:39.28ID:LqHG2ZTu
> ま、これはいいか
> 「こういう仕様ならこういう方法もあるよ」くらいなら
俺もそう思う
条件付き提案に「そんな条件は許さん」と食って掛かる人間が一番困る

524Name_Not_Found2018/02/17(土) 00:39:10.10ID:???
>>518
class属性の代わりにdata-*属性を使うという話をしてる
その話にWeakMapが頓珍漢な答であることは明白
だから黙ってろって話

525Name_Not_Found2018/02/17(土) 00:44:17.87ID:???
日本語読めないのかな?


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個と少ないので楽かなと


----------

$('.aaa').removeClass().addClass('aaa');
とすると、.aaaに静的に付けたその他のクラスが消えてしまうという指摘を
>>142でやっていて

質問者>>143のレスの冒頭、
それはそうなんだけど。と認めている。
そして・・・の管理が面倒だけど、最初つけるclassは1,2個で楽かなといってる

最初つけるclassが何個でもいいし・・・の管理も楽になる手段として
data-*属性を使う方法を提案している。

ここまではいいよな?

526Name_Not_Found2018/02/17(土) 00:44:37.61ID:???
data君はちゃぶ台返しをするから好きになれん
「スコープって何よ?⇒説明⇒いや、そもそもWeakMapの話なんてしてないから」
他人に説明させておいてそれはないだろ
「そもそもWeakMapの話なんてしてない」が結論ならスコープの説明を求める必要がない

527Name_Not_Found2018/02/17(土) 00:47:06.65ID:???
>>525
静的classと動的挿入classの管理が面倒だから分割したいって要件に読めるけど

528Name_Not_Found2018/02/17(土) 00:50:51.26ID:???
「静的classと動的挿入classの管理が面倒だから分割したいって」ってどういう意味ですか?

他の人、誰か理解できる人いますか?

これ自分用語で誰にも理解できない文章ですよね

529Name_Not_Found2018/02/17(土) 00:52:37.58ID:???
静的につけたclass名と動的につけたclass名が衝突してしまう可能性があるが、名前を管理するのが面倒だから処理を分割したい、という意味だろ
スコープの下りを読めば分かるだろうに

530Name_Not_Found2018/02/17(土) 00:52:55.15ID:???
>>526
> data君はちゃぶ台返しをするから好きになれん

ちゃぶ台? 最初からスコープ関係ないだろって言ってんだろ

↓ほれみろや。俺は関係しないと最初から言ってる。

498 自分:Name_Not_Found[sage] 投稿日:2018/02/16(金) 23:29:53.34 ID:???
誰かここでスコープが関係してくる理由説明できる?誰もできないと思う

500 名前:Name_Not_Found[sage] 投稿日:2018/02/16(金) 23:35:27.92 ID:???
今の属性の話に変数のスコープは関係ないからねw



関係するというのなら説明してみろって話
そして説明を聞いて、やっぱりスコープ関係してないじゃんかという結論
最初からスコープ関係ないって話をしてる。

531Name_Not_Found2018/02/17(土) 00:53:30.87ID:???
>>529
だからスコープ関係ないって言ってんだろうが
いい加減にしろ
「何を頓珍漢な事を」ぐらいにしか思っていないぞ

532Name_Not_Found2018/02/17(土) 00:55:06.96ID:???
>>529
> 静的につけたclass名と動的につけたclass名が衝突してしまう可能性があるが、

静的に付けたclass名がaaaで、動的に付けたclass名もaaaで
衝突してしまうと言いたいんですか?

では、最後の質問です。それはどこを見てそう勘違いしたんですか?

衝突ですよね。「衝突」「被る」「重複する」「同じ名前」など
それに類する言葉が使われているレスを指ししめなさい

533Name_Not_Found2018/02/17(土) 00:56:07.99ID:???
指し示すっていうのは、あんたが読んで勘違いしてしまったレスなんで
自分で書いたレス読んで自分が勘違いしたなんて
アホなことはいわないようにねw

534Name_Not_Found2018/02/17(土) 00:56:22.47ID:???
というか、>>142が問題提起したものだろ
流れ見れば、誰ても分かると思うが

535Name_Not_Found2018/02/17(土) 00:57:43.32ID:???
これですね。>>142が問題点を指摘して
質問者の>>143が「そうなんだけど」と納得した流れです。


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
そうなんだけど・・・の管理が面倒で
変更の度にそこも付け加えなくてはならなくて

536Name_Not_Found2018/02/17(土) 00:59:08.15ID:???
>>530
関係ないと初めから分かっているなら、スコープの質問をしなければよかったと思うよ
質問するまでもなく、分かっているんだから

537Name_Not_Found2018/02/17(土) 01:01:09.22ID:???
>>536
オマエ馬鹿なのか?

スコープの質問なんかしてないが?


500 名前:Name_Not_Found[sage] 投稿日:2018/02/16(金) 23:35:27.92 ID:???
今の属性の話に変数のスコープは関係ないからねw

関係あるというのなら、どういうふうに関係があるのか
説明してもらおうか。変数のスコープの説明じゃないぞ
変数のスコープが今回のclass属性の代わりにdata-*属性を使うと
管理しやすくなるという話にどう関わってくるのかの説明だ

538Name_Not_Found2018/02/17(土) 01:01:43.53ID:???
粘着質な人が多いねえ

539Name_Not_Found2018/02/17(土) 01:01:54.53ID:???
こうやってスコープの説明じゃないぞっていっても
スコープの質問をしたと勘違いするバカが居るんだよなぁw

540Name_Not_Found2018/02/17(土) 01:02:50.06ID:???
こうやって、俺が何を言ったかをいちいち書いておかないと
話を捻じ曲げてくるからな。
ずーっと捻じ曲げようとしている。
だから何度も引用するわ

541Name_Not_Found2018/02/17(土) 01:05:38.50ID:???
一人で何連投するつもりなんだか

542Name_Not_Found2018/02/17(土) 01:06:54.46ID:???
このスレを「スコープ」で検索すると最初に見つかるのはこれ


497 名前:Name_Not_Found[sage] 投稿日:2018/02/16(金) 23:28:06.66 ID:???
> data君が気が付いてない問題は、スコープでしょ
> 属性は公開されているわけだし、その答えに行き着くのは理解できるけどね

それに対する最初のレスで、すでにスコープが関係ないことを示している
関係有ることを誰も説明できない。だって関係ないもの。

498 自分:Name_Not_Found[sage] 投稿日:2018/02/16(金) 23:29:53.34 ID:???
> 誰かここでスコープが関係してくる理由説明できる?誰もできないと思う
>
> 多分こいつ、自作自演してる。書いた本人だわ
> 自分にしか通じないことしか言ってない

543Name_Not_Found2018/02/17(土) 01:07:33.01ID:???
>>541
俺が飽きるまで何連投でもするよw
せっかくの、お・も・ち・ゃw

544Name_Not_Found2018/02/17(土) 01:10:58.59ID:???
ここは質問スレではありません
data君のストレス発散スレです

545Name_Not_Found2018/02/17(土) 01:13:49.56ID:???
いいえ、質問に答えているだけです。
次から次へとくるよくわからない質問に
答えているだけです。

546Name_Not_Found2018/02/17(土) 02:22:55.37ID:???
data君はどうしてそんなに暇なのですか?

547Name_Not_Found2018/02/17(土) 09:13:40.43ID:???
おもちゃ遊びがしたいなら余所へ行けよ

548Name_Not_Found2018/02/18(日) 10:54:35.69ID:???
>>535
そうなんだけどは問題点としてではなくaaaが一旦消えること
aaaにCSS(見た目)は当ててないので閲覧者に不便はない
実際ブラウザで正常に動作する(=だからいいではないが)からいいんだよ
別に問題とは思ってないし問題にはなってない

549Name_Not_Found2018/02/18(日) 12:33:47.02ID:???
>>548
動くかどうかじゃなくてメンテナンスコストの問題

> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて

550Name_Not_Found2018/02/18(日) 17:28:52.71ID:???
ならもう使ってるだろ>>485

551Name_Not_Found2018/02/18(日) 18:08:20.45ID:???
data-属性使ってほしくないんだろw

552Name_Not_Found2018/02/18(日) 21:18:43.54ID:???
data-属性使ってほしいんだろw

553Name_Not_Found2018/02/18(日) 23:31:46.65ID:???
結局toggleClassはどうなったんだっけ

554Name_Not_Found2018/02/18(日) 23:45:37.99ID:???
>>553
attr()メソッド使えばいいで終わり

555Name_Not_Found2018/02/19(月) 08:29:30.07ID:???
$('.aaa')
 .removeClass().addClass('aaa').end()
.attr('class', 'aaa');

556Name_Not_Found2018/02/19(月) 16:08:13.70ID:???
>>553
何をしたい?

557Name_Not_Found2018/02/19(月) 22:33:18.00ID:???
data君=const君?

558Name_Not_Found2018/02/19(月) 23:00:02.75ID:???
const君なんていたのかw

559Name_Not_Found2018/02/19(月) 23:20:56.86ID:???
優秀な書き込みは全部俺♪

560Name_Not_Found2018/02/19(月) 23:41:22.72ID:???
キモ

561Name_Not_Found2018/02/20(火) 20:38:40.17ID:???
>>548って最初の質問の時点で読み取れるよな
勝手に問題、困ってると解釈して勝手に修正しようとしてたわけだ

562Name_Not_Found2018/02/20(火) 22:42:01.26ID:???
data君の攻撃は止まらない

563Name_Not_Found2018/02/20(火) 23:11:37.66ID:???
> >>548って最初の質問の時点で読み取れるよな

その次のレスで覆ったんだよ

564Name_Not_Found2018/02/20(火) 23:23:10.95ID:???
data君は自分が優秀だと思っている
こんなところにいる底辺な奴らに自分が馬鹿にされていいわけがない
そうだ、明らかに馬鹿なこいつを煽ってやろう
馬鹿なこいつは自爆するからそこを追求してやればいい
そうして、皆が自分を優秀な人間だと認めるだろう

565Name_Not_Found2018/02/20(火) 23:30:10.41ID:???
相変わらず中身が無いことをべらべら喋るなw

566Name_Not_Found2018/02/21(水) 01:03:44.87ID:???
date君のプロファイリングか

567Name_Not_Found2018/02/21(水) 01:09:17.64ID:???
早く煽ってやれよw

568Name_Not_Found2018/02/21(水) 08:25:14.36ID:???
data君はお山の大将

569Name_Not_Found2018/02/21(水) 19:59:33.21ID:???
>>563
次のレスで解決しとるよw

570Name_Not_Found2018/02/21(水) 22:41:21.32ID:???
>>569
次のレスってどれのこと?


質問者: 140 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 10:57:06.54 ID:???
> .aaaに動的に付けたclass(bbb ccc ddd・・・)の削除や付け直しを一括でしたく
> $('.aaa').removeClass('bbb ccc ddd・・・');
> を
> $('.aaa').removeClass().addClass('aaa');
> とするのはあり?

質問者への問題点の指摘: 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個と少ないので楽かなと

質問者の次のレスを解説すると

1. そうなんだけど => 問題点への指摘の同意
2. ・・・の管理が面倒で => 面倒な部分
3. 変更の度にそこも付け加えなくてはならなくて => ・・・の部分が変わる
4. 最初つけるclassは1,2個と少ないので楽かなと => 個数は不明だが、少ないのでまだましだということ

これに対してdata-*属性を使った場合は、全ての問題が解決する

571Name_Not_Found2018/02/21(水) 23:53:08.85ID:???
なるほど

572Name_Not_Found2018/02/22(木) 00:31:44.20ID:???
まだやってたのかw

573Name_Not_Found2018/02/22(木) 15:37:04.38ID:???
classは論外だが何でもかんでもdata-に頼るべきではない
<custom-postit data-form=circle
のように基本的に使うものであって、
ある特定のJS内で完結する場合の要素へのデータの紐付けはWeakMapを使うべき

574Name_Not_Found2018/02/22(木) 19:59:44.10ID:???
>>570
まだ続けたいのか

>>573
kwsk

575Name_Not_Found2018/02/22(木) 20:31:42.67ID:???
弱くて迷いそう。ストロングナビ使いたい。

576Name_Not_Found2018/02/22(木) 20:58:23.32ID:???
>>574
詳しく言うとJS内で完結するというのは主にCSSと連携しないってことだよ
CSSからJS内の変数は読み書きできないから変数の値が○○の時に色を変えるとかはできない
data-ならCSSと連携できるがそれが必要ないなら場合はJSでいい

もともとは全部classに入れていたわけだけど、classをCSSと連携しない使い方をしてるなら
data-ではなくJS側に全部持ってこれるということ
今回がどっちに当てはまるのかはしらないけどね

577Name_Not_Found2018/02/22(木) 21:07:38.86ID:???
ん?元はclass使っていたってことは、CSSと連携したいってことでは?
しきりにWeakMapを連呼してるのは、オブジェクトが消えてもメモリリークが
起きないってことを言いたいのかもしれないけど、それはjQueryのdata()メソッドでもできること
(質問者がdata()メソッドの存在を知らなかった可能性はあるけど)


http://api.jquery.com/jQuery.data/
> The jQuery.data() method allows us to attach data of any type to DOM elements in a
> way that is safe from circular references and therefore from memory leaks.
> We can retrieve several distinct values for a single element one at a time, or as a set:

もともとclassを使っていた以上CSSと連携させたいと思うのが普通で
それをJS側に持ってこれるとは思わないな。

578Name_Not_Found2018/02/22(木) 21:29:38.74ID:???
> ん?元はclass使っていたってことは、CSSと連携したいってことでは?
ただの思い込み

579Name_Not_Found2018/02/22(木) 21:51:07.16ID:???
その理屈で言えば、WeakMapでできるというのも思い込みなわけで

580Name_Not_Found2018/02/22(木) 21:51:08.74ID:???
$(V.aaaV).attr(VclassV, VaaaV);

581Name_Not_Found2018/02/22(木) 21:52:25.33ID:???
>>579
最初はそれに気づかずに、CSSと連携できないって
指摘されて意見を変えたみたいねw

5825732018/02/22(木) 22:48:31.78ID:???
言っとくけど俺は573以降ここまでレスしてないから
それに意見を変えたって、一体どういうこと?
意見は全部573に含まれてて完結している

書いたとおり、要素とデータを結びつけるときには必ずしも要素の属性を利用しなくとも
WeakMapの方が勧められる『場合もある』と言っただけ
そしてその理由は主にセマンティクス上のもので機能の優劣を述べたつもりもない

間隔としてはグローバル変数をむやみに使うなと同じような小言
それ以上でもそれ以下でもない
大人ならすぐ他人を煽ったり話を茶化して非建設的な流れに持っていくのは辞めろ

583Name_Not_Found2018/02/22(木) 23:18:37.32ID:???
>>576
文は長いが書いてあること全然詳しくないのだが
具体的にお願いできないかな

584Name_Not_Found2018/02/22(木) 23:26:29.20ID:???
>>583
最初から意見かえたのか?

>> 438
> まだやっていたのか
> 静的につけたclassが動的処理で消える問題を考慮するなら、data-*もclassも同じ問題を抱えてる
> WeakMapを使えば良いだけ

585Name_Not_Found2018/02/22(木) 23:27:30.13ID:???
>>582
タグのclassを使う代わりに、JavaScriptの変数にしろっていう意見でOK?

586Name_Not_Found2018/02/22(木) 23:31:15.95ID:???
要するにそれを使ってスタイルを当てる、とか
カスタム要素で利用する属性である、とか
他のライブラリやモジュールから利用される、とか
第三者と共有する必要があるために、データをおおやけにする意味があるならいいが

そうでなくJSで自分自身の閉じた空間内でメモ書きがしたいだけなら
要素の属性を使うのは下品じゃないかということだろう

587Name_Not_Found2018/02/22(木) 23:37:31.10ID:???
>>585
一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
普通要素の属性を使うもんだと考え方が狭くなってないか?ということ

それと一般的抽象的に考えて、オブジェクトとデータを結びつける効果的方法である
WeakMapをもっとどんどん使っていこうよという意見

588Name_Not_Found2018/02/22(木) 23:48:20.73ID:???
いや、class属性でやっていたものをWeakMap使えばいいっていうのが
必ずしも正しくないって話だろ。cssで使えないんだから
なんでもかんでもWeakMapで解決するような言い方をするからいかんのだ

589Name_Not_Found2018/02/22(木) 23:52:33.97ID:???
>>587
> 一番言いたいことは、そういう方法も使えるのに要素をデータを結びつけるためには
話がずれてるよ

要素とデータを結びつけたいなんて誰も言ってない
class属性のメンテナンスが面倒くさいって話をしてる

590Name_Not_Found2018/02/23(金) 09:21:20.79ID:???
>>588
自分はWMを使う方が良いケースもあると言っただけであって
なんでもかんでもWMでなんて一言も言っていない

>>589
それを言っちゃあそもそも論が出てきた最初の質問から5スレ後には既にずれてて
今や一般的な話になっている
そのクラスだって単にjQから利用するためのラベル付なのかもしれないしね

591Name_Not_Found2018/02/23(金) 10:09:01.97ID:???
>>589
要はsourceの意図
classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ
data-*="hoge" にしても結局は製作者の意図によるもの
ま、個々の勝手だが

592Name_Not_Found2018/02/23(金) 21:49:01.55ID:???
>>584
> 最初から意見かえたのか?

何言ってるかわからん
誰か別人と勘違いしてないか?

593Name_Not_Found2018/02/23(金) 22:05:16.07ID:???
>>587
それは一理ある

>>589
>class属性のメンテナンスが面倒くさい
それってdata君の言い分だよな

少なくとも質問者はそう思ってない
もっといい方法もあるよももっともだが質問者は断ってるしな

594Name_Not_Found2018/02/24(土) 00:51:29.52ID:???
>>590
> 自分はWMを使う方が良いケースもあると言っただけであって

それをいうなら、俺だって今回のケースでは
data-*属性をつかうと良いというだけで、
すべての場合でdata-*属性を使えなんて言っていない

つまり、俺が今回の問題に対してレスしている所に横から割り込んできて、
今回の問題とは無関係な話を始めたお前がおかしい

595Name_Not_Found2018/02/24(土) 00:52:35.74ID:???
>>593
> それってdata君の言い分だよな
質問者が言ってるよ

↓ほらね

143 名前:Name_Not_Found[sage] 投稿日:2018/01/28(日) 17:27:37.90 ID:???
> >>142
> そうなんだけど・・・の管理が面倒で
> 変更の度にそこも付け加えなくてはならなくて
> 最初つけるclassは1,2個と少ないので楽かなと

596Name_Not_Found2018/02/24(土) 00:54:02.66ID:???
>>591
> classにしても class="*-aaa, bbb" とか部類の意図を把握できればそれで良いんだよ


その話は>>210で俺がすでにしてる

> ま、無理やりやろうとするなら、classの値に特殊な名前つけルールを作って
> そのルールを解釈して操作する関数を作るなんて "無駄なこと" をやればできるがねw
> whiteとではなくcolor-whiteみたいにプリフィックス付けて全部列挙して color- だと・・・無駄だなw

597Name_Not_Found2018/02/24(土) 05:43:09.54ID:???
>>594
自分が言いたいのはその2つのどっちが優れているかではなく、
他の有効なやり方だってあるんだし、細かな意味的なことだって重要
だからそれぞれ適材適所バランス良く使おうねということ

今回のケースにしたって情報が不足してるんだからこれが最適だとかいう回答はできないから揉めている
結果一般論的にこれまでの全ての流れを踏まえて勝手なまとめ的にそういった感想を述べたまでで
君に当て付ける気なんて微塵もないし、完全に被害妄想

598Name_Not_Found2018/02/24(土) 08:37:35.14ID:???
>>596
無理やりとかw
どちらにしてもhtmlとしては個人の単なる部類に過ぎないし、文書構造からして無意味なこと
あくまで主観に過ぎない

599Name_Not_Found2018/02/24(土) 13:22:35.91ID:???
>>595
横から失礼
data-*にしてremoveClass()の部分はどうすんの?
得体のしれないclass(相当)がある場合とない場合で

600Name_Not_Found2018/02/24(土) 13:57:38.27ID:???
>>599
話を再確認しようか?

今回の話はdata-*属性を使ったら楽に実装できるという話であって
今回の話にremoveClass()が必要か?という話を先に決めないといけない

答えを言うと今回の話にremoveClass()は必要ない

601Name_Not_Found2018/02/24(土) 13:59:08.58ID:???
今回の話data-*属性を使ってclass属性をエミュレートしましょうって話じゃない。

今回の話はclass属性を無理やり使ってるのをやめて
data-*属性を使えばシンプルに実装できる。という話だから

602Name_Not_Found2018/02/24(土) 14:36:07.77ID:???
まあ別にremoveClassなんて簡単な処理なんだけどねw

var data = "foo foobar foo bar";
console.log(data.replace(/(^|\s)foo(\s|$)/g, ' '));

603Name_Not_Found2018/02/24(土) 14:46:41.79ID:???
こんな感じかな

$(・・・).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っぽく解釈する属性セレクタが有るから
属性を空白区切りの語のリストとして操作するプラグインは
準標準といってもいいぐらいの価値はあると思う。

604Name_Not_Found2018/02/24(土) 15:05:12.45ID:???
折角DOMTokenListが使えるclassListを使わずに
dataset使ったと思えばDOMStringMapも利用しないで文字列パースとか
正気の沙汰とは思えんな
そんなやり方のほうがよっぽど他に方法がなかったのかと言われるおかしいことだと思うがね

605Name_Not_Found2018/02/24(土) 15:16:14.32ID:???
全くシンプルじゃない
スマートフォンがスマートじゃないのと同じこと

606Name_Not_Found2018/02/24(土) 15:17:20.45ID:???
>>604
おまえは知らんかもしれんけど、classListが使えるようになったのってIE10からだぞ。
それまでjQueryを使わない場合に、普通にやっていたことなんだが
ほんと正気の沙汰じゃなかったよねw

607Name_Not_Found2018/02/24(土) 15:18:32.27ID:???
ほらねw

だから最初に今回はremoveClass()は不要っていう話をしようって
言ったんだが。

608Name_Not_Found2018/02/24(土) 15:19:18.02ID:???
今回の話はdata-*属性をつかうといシンプルにできるって話をしてるのに
話が通じないのは馬鹿だからか卑怯だからか

609Name_Not_Found2018/02/24(土) 15:22:20.69ID:???
わかった。今回の話はdata-*属性を使ったほうが
シンプルにできる。

で?

610Name_Not_Found2018/02/24(土) 15:24:55.49ID:???
で?と言われてもな

今回はdata-*属性を使ったほうがシンプルにできるから
data-*属性を使いましょう。とかしか
何が聞きたいの?

611Name_Not_Found2018/02/24(土) 15:42:42.97ID:???
599です

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

>>602,603
removeClass()でいいかな、わかりやすいし

612Name_Not_Found2018/02/24(土) 16:16:39.83ID:???
data-*属性を使おうっていう話は
一つのdata-*属性に複数の値を空白区切りで
入れたりはしないのでremoveClass()は単に
attr('data-name', '') でいいんだよ

いっぺんに複数の値を初期化したければ
attr({data-name1: '', data-name2: '', data-name3: ''})
という書き方もできる

613Name_Not_Found2018/02/24(土) 16:19:53.90ID:???
そういやremoveAttr()ってのもあったな
スペース区切りで同時に複数の属性を消せるようだ

614Name_Not_Found2018/02/24(土) 16:23:35.66ID:???
そうか一個しか存在しないclass属性は一つの属性に複数入れるために
スペース区切りで入れるしかないけどdata-属性は複数作れるから
そんなことしなくていいいだな

615Name_Not_Found2018/02/24(土) 19:05:36.43ID:???
>>612
それだと
> 変更の度にそこも付け加えなくてはならなくて
と変わらないぞ

616Name_Not_Found2018/02/24(土) 19:24:05.19ID:???
>>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と??に影響をあたえること無く消したいものだけを消せる

617Name_Not_Found2018/02/24(土) 19:30:56.75ID:???
もうキチガイdata君の相手するなよ

618Name_Not_Found2018/02/24(土) 19:32:27.47ID:???
そうそう勝ち目ないんだからw

619Name_Not_Found2018/02/24(土) 20:18:35.43ID:???
>>613
引数なしはないので代わりにはならない

620Name_Not_Found2018/02/24(土) 20:19:36.85ID:???
>>616
逆に言うとライブラリの想定外のものが消せない

621Name_Not_Found2018/02/24(土) 21:04:34.07ID:???
>>461
> 次のスレタイ=マウント取りたくてウズウズしているスレ

data君がマウント取りたくてウズウズしているスレ

622Name_Not_Found2018/02/24(土) 21:24:59.31ID:???
お世話になります。
【使用しているJquery:ScrollMagic】
質問内容:setpinで要素固定、reverse:falseで固定を1度のみで指示
     最下部から上部へスクロールで戻る際、固定したスクロール分されてない箇所と距離が広がるのでどのように対処すればよいのか

よろしくお願いします。

623Name_Not_Found2018/02/24(土) 22:01:05.12ID:???
>>619
今回の話に関係ない

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

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

>>622
ここはjQueryのスレなのでjQueryに関係ないものは対象外

624Name_Not_Found2018/02/24(土) 22:47:46.35ID:???
いや613>619は関係あるだろw

625Name_Not_Found2018/02/24(土) 22:59:29.84ID:???
>>624
はぁ〜、本当に説明しないと分からんのか

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

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

なんでremoveAttrの引数なしが関係するんだ馬鹿か

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

なんかdata君の話聞いてたらそもそもdataをdatasetではなく
単にHTML構文上許されてる自由な属性の書き方みたいにしか捉えてないみたいだし
なんか残念だよね

627Name_Not_Found2018/02/25(日) 05:38:31.15ID:???
つうか>>616の用途ならそれこそMap使ったほうが良くね
data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ

628Name_Not_Found2018/02/25(日) 08:32:49.79ID:???
map使え派は全くサンプルコードを示さない。class派もdata派も出してるのに

629Name_Not_Found2018/02/25(日) 09:09:45.23ID:???
>>616
> data-*属性だと想定外のものは入らないのでそういった問題がない
それはただキミの想定でのお話だろ?w
$(name).attr('class', name); これで解決

また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
デザイン目的だけでわざわざ無意味な属性を残しておくことは無駄
jQueryらしくない

630Name_Not_Found2018/02/25(日) 12:02:00.86ID:???
>>626
> data君は、そもそもclass属性の存在自体が不要と言いたいのか?

そんなこと言ってない。今回の話では、今回の話では、(二度ry
data-*属性を使えばCSSと同じようにデザインも適用できて
シンプルに書くことができるという話

631Name_Not_Found2018/02/25(日) 12:04:02.89ID:???
>>626
> 基本的にclassは複数の要素が取りうる分類上のタグを記述する場所で
そういう使い方をしているなら、
そもそも一部を残して残りのクラス値は消去
なんて仕様は生まれない。

だから、今回の話では、今回の話では、(二度ry
classの一般的な使い方をしていないということ
だからそれらclassの一般的な使い方をしていないところだけを
data-*属性に移動すればシンプルになる

632Name_Not_Found2018/02/25(日) 12:05:51.22ID:???
>>627
> つうか>>616の用途ならそれこそMap使ったほうが良くね

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

Mapで何が不可能になるかはすでに何度も言ってるが、
CSSでスタイルを適用できなくなる

633Name_Not_Found2018/02/25(日) 12:07:59.86ID:???
>>627
> data-はパブリックなんだしもし皆がそれを大胆に使うようになれば衝突の可能性もあるぞ

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

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

「衝突の可能性がある」は事実では有るが問題点ではない

634Name_Not_Found2018/02/25(日) 12:10:07.89ID:???
>>629
> それはただキミの想定でのお話だろ?w

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

最初につけるクラスは1個の場合もあるし、2個の場合もある
そして問題が解決したわけではなく、楽と書いていることからもわかるように
これもいやだけど少ないのでまだ楽だろうという話

635Name_Not_Found2018/02/25(日) 12:11:28.81ID:???
>>629
> また、デザインだけが目的ならcss()を使ってhashで置き換えれば良いだけ
ないわーwwww

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

思いつきで語るな

636Name_Not_Found2018/02/25(日) 12:32:33.49ID:???
>>635
無意味な値のないカスタム属性をくっつけているよりスマートだし、
この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む
動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい
それがjQueryを使用することで得られる生産性の向上

637Name_Not_Found2018/02/25(日) 13:05:55.45ID:???
> $('.aaa').removeClass().addClass('aaa');
$('.aaa').attr('class', 'aaa'); // 最小限に明確な意図する結果にする
これが最良

638Name_Not_Found2018/02/25(日) 13:38:57.87ID:???
>>636
> 無意味な値のないカスタム属性をくっつけているよりスマートだし、
だから理由かけや
説得力皆無だ

639Name_Not_Found2018/02/25(日) 13:39:25.84ID:???
>636
> この場合視覚的な意味合いでしか無いから.css('プロパティ', '')だけで済む

bbb, ccc, ddd のどこが視覚的な意味合い?

640Name_Not_Found2018/02/25(日) 13:40:51.88ID:???
>>636
> 動的な変更はjQuery側でやっているんだからjQuery側で管理すればいい

その理屈だと、jQueryで属性を変える所すべて
HTMLから取り除けってことになるが?w
class属性も含めて

641Name_Not_Found2018/02/25(日) 13:41:56.53ID:???
>>637
それだと.aaaの他に消してはならない.hogeが追加された時
結局ソースコードに修正が必要になります。

642Name_Not_Found2018/02/25(日) 14:13:14.27ID:???
はいはい、>>637で終了

643Name_Not_Found2018/02/25(日) 14:33:18.98ID:???
注意 >>637はすでに反論があって
その反論からは逃げています

644Name_Not_Found2018/02/25(日) 16:12:42.36ID:92jxcUMI
eachで配列を読み込み
横向きの表を作成したいのですが、
どのようなコードで描画できるでしょうか?よろしくお願いします。

<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
$(function(){
var arr = [ "行1データ", "行2データ" ];
$.each(arr, function(i, val) { $('tr').append('<td>' + val + '</td>'); //行ごとにデータが作られ駄目でした
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
行1
</td>
</tr>
<tr>
<td>
行2
</td>
</tr>
</table>
</body>
</html>

645Name_Not_Found2018/02/25(日) 16:22:13.07ID:???
別スレにこの間書いた

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

https://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);

646Name_Not_Found2018/02/25(日) 18:44:14.42ID:???
>>625
変更追加の度にnameを書き換えなくてはならないのでダメです

647Name_Not_Found2018/02/25(日) 18:56:41.42ID:???
>>633
classっていうのは共有のもので皆が追加していくもんだ
きちんとスペースで区切って使うというコンセンサスがあり衝突はしない
一方data-*はだれがどう使うか分からない

新着レスの表示
レスを投稿する