jsの変数の取り方でハマったのでメモ
jsを使って動的に変数を定義し、それを出力するアプリを作ろうとした時の話。
DOMを変数として定義して、そこからパラメータを引っ張り出そうとしたのですが、2回以上変数を変えようとした時、パラーメータを上書きできずにハマったのでメモ。
間違い、足りない部分等ありましたらご指摘ください。
結論、値渡しか参照渡しかということでした。
jsにおいてオブジェクト型は参照渡しだそうで・・・
DOMとしてではなく、直接パラメータの値を引っ張り出さなくちゃならないようです。
値渡し： 値そのものの情報が渡される(値そのものが変数に入る)
参照渡し：参照するためのメモリの場所が渡される(メモリに記録された値が変数に入る)
以下、奮闘記
JS
$(document).on('turbolinks:load', function(){
$('.colorPreview').on('change', '#opacity_switch', function(){
var targetColor = $(this).data('color')
if(opa_switch == 2){
}
})
})
①あるエレメントにdata属性を持たせ、欲しいパラメータを入れておく
②スイッチを入れた時にその値を読み込み、出力する
という機能を実装しようとした際、繰り返しdata属性の値を変化させて読み込ませるとうまくいかない。初めの値のまま上書きがされない。。。
var targetColor = $(this).data('color')のすぐ下にconsole.log(this)を入れて確認すると、エレメントのdata属性の値は更新されている。。。なぜ？
ではconsole.log($(this).data('color'))では・・・やっぱり2回以上やると、こっちは値が更新されない。
調べてみると、jsでは変数の値の取ってき方が2種類あるらしく、冒頭にあった値渡しと参照渡し。
ならばDOMとしてではなく、エレメントのプロパティから直接引っ張ってきた値を代入すればいいのかな？？？
JS(改)
$(document).on('turbolinks:load', function(){
$('.colorPreview').on('change', '#opacity_switch', function(){
if(opa_switch == 2){
}
})
})
いけました！
参考サイト：
