こんにちは。いっとくです！
Vue.jsやReact.jsがメインストリームになっている中、相変わらずjQueryばっかり使ってます。生粋のクエリストです。クエルしようぜ！つってね。
いうて、今もjQueryを使っているところって結構あると思うんだ。別に現状に不満も不足もないし、ビジネスの収益性に影響を及ぼさないのであれば、それでいいと思うんだ。
JSに関する話題でこんな発言をしたら、全方位からロケットパンチでも飛んできそうで恐ろしいですが、今回はjQueryのdataメソッドにまつわる体験談。
dataメソッドで値を書き換えたのに、DOM上で数値が変わっていなかったよ！という怖いお話です。
jQueryのdataメソッドで書き換えているのは要素の値ではない
僕が結構よく使うjQueryのメソッドの一つにdataというものがあります。
これはHTMLタグのデータ属性を取得したり、変更したりする便利なメソッドです。
data属性を使えば割と自由にタグに値を付与できるので、とにかく力技で問題を解決したいときによく使います。
ということで実例！
まずはこんなHTMLがありましたとさ。
<input id="input_text" type="text" name="shop" data-area="jp">
data属性は「data-」の接頭辞 + 任意の命名をし、その中に値を格納することができます。
まずは、このdata属性の値をjQueryで取得。
$('#input_text').data('area'); // 'jp'
シンプルですね。大好き。
じゃあ次はdata属性を書き換えるぞ！
値を書き換える場合はdateメソッドの第二引数にセットしたい値をいれてあげればOKです。
$('#input_text').data('area', 'us');
$('#input_text').data('area') // 'us'
うん、バッチリ書き換わってるね！
ってことで、HTMLを見てみると…
<input id="input_text" type="text" name="shop" data-area="jp">
…jpのままじゃん！！
どうやらjQueryのdataメソッドは、HTMLタグの値を直接書き換えるのではなく、jQueryオブジェクトが持っている値を変えているだけっぽい！
ということなので、実際にDOMまで書き換えたいという場合は、attrメソッドを使いましょう！
使い方はこの通り
$('#input_text').attr('data-area', 'us');
console.log($('#input_text').data('area')); // 'us'
すると、dataで取得してもusに変更されているし、、、
<input id="input_text" type="text" name="shop" data-area="us">
DOMの要素もしっかり書き換わっています！
ということなので、もしDOMの要素も合わせて書き換えないと動かないよ！って時はattrメソッドを使うようにしましょ〜
以上、いっとくでした！
おしまい
コメント