JS変数の値が更新されなくて困っています
- JS変数の値がリサイズしても更新されない現象が発生しています。質問者は画面幅によってJQueryの関数をオン、オフしたいと考えており、特定のウィンドウ幅で関数を実行する必要があります。しかし、現在のコードではウィンドウ幅を判定するための変数が正常に更新されず、困っています。
- 質問者はウィンドウのリサイズ時に特定の条件で関数を実行する必要があります。コードでは、ウィンドウの幅を求める関数が定義されており、リサイズイベント時にその関数が実行されるようになっています。しかし、関数内で変数の値を更新するものの、実際には変数の値が正常に更新されないという問題が発生しています。
- 質問者は画面幅によってJQueryの関数をオン、オフしたいと考えています。現在のコードでは、ウィンドウの幅を取得するための関数が定義されており、リサイズイベント時にその関数が実行されるようになっています。しかし、コンソールログに表示される値を確認してみると、リサイズしても変数の値が更新されず、困っています。関数内での値の更新は確認できるのですが、なぜ変数の値が更新されないのかがわかりません。
- ベストアンサー
JS 変数の値が更新されなくて困っています…
https://qiita.com/r_abe01/items/a3a2e94b5162d949037b 画面幅によってJQueryの関数をオン、オフしたいと思い、上記のサイトのContentを使用しての方法を試しているのですが、いくら改変しても上手くいきません。 下記で行いたいのは、 (1)ウィンドウ幅を変える度にfunction checkWidthで横幅を求める。 (2)その都度値をvar layoutに代入。 (3)そのlayoutの値によって関数を実行するか田舎を判断する。 です。 しかしconsole.log(layout)を見てみると、リサイズをしても値が変わらず、困っています。return contentで、contentの値が変わっているのは確認できるのですが、どうしてlayoutの値は変わらないのでしょうか。 var $win = $(window), $mediaQueries = $('.jsc-media-queries'); (2) var layout = checkWidth(); (1) function checkWidth() { var content = $mediaQueries.css('content').replace(/"/g, ''); return content; } $win.on('load resize', checkWidth); $win.on('load resize', function() { console.log(layout); }); (3) if (layout === 'sp') { $(セレクタ").on("click", function() { $(this).next("ul").slideToggle(); } ご回答いただけると幸いです。
- RickyIma
- お礼率78% (120/153)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
$win.on('load resize', checkWidth); は checkWidth() 関数を実行するだけで layout 変数を書き換える処理が入っていません。 なので layout 変数の値は変わりません。
関連するQ&A
- 関数の引数とグローバル変数について
javascript初心者です。 どうしても分からないことがあるので質問させて頂きます。 グローバル変数の値を関数で処理して増やしコンソールログに表示していく、 というようなソースがあるとします。（以下） //グローバル変数 var a = 0; var b = 0; var c = 0; //計算する関数 var afunc = function(){ a++; console.log(a); } var bfunc = function(){ b++; console.log(b); } var cfunc = function(){ c++; console.log(c); //onclickなどで呼び出す関数 function test1(){ var aplus = new afunc(); } function test2(){ var aplus = new bfunc(); } function test3(){ var aplus = new cfunc(); } グローバル変数や関数などが３つと数が少ないならこれでもいいかも知れませんが、 これが数十個とかに増えると、ソースの量もかなり多くなり 管理も大変になると思い簡略化させたいと考えました。 そこで以下のように変えてみたのですが、 加算がうまくいきません。 //グローバル変数 var a = 0; var b = 0; var c = 0; //計算する関数 vvar xxfunc = function(xx){ this.xx = xx; this.show = function() { this.xx++; console.log(this.xx); } } //onclickなどで呼び出す関数 function test1(){ var aplus = new xxfunc(a); aplus.show(); } function test2(){ var aplus = new xxfunc(b); aplus.show(); } function test3(){ var aplus = new xxfunc(c); aplus.show(); } もしかすると、関数の引数にはグローバル変数を指定することができないのでしょうか？ 何かうまいやり方はあるでしょうか？ プログラミング自体が勉強し始めたばかりなので、 おかしなソースの書き方をしているかもしれませんのが、 ご教授、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- js初心者 consoleなどについて
初心者で恐縮ですが、よろしくお願いします。 jqueryを使用してます。 $(function () { obj = function(attr){ $.get('getFileList.php', {attribute : attr.data.value }, function(data){var array = data;}); }; delete obj; $("#file").on('input', {value:'file'}, obj); }); #fileに入力があったらobjが発動し$.getでphpから値を得て出力するという処理を書いています。 うまくいかないので変数arrayにちゃんと値が入っているか確認しようとしconsole.log(array)としたところjsのソースコードがconsoleにそのまま表示され、console.logを消してみてもまったく変化がなくなってしまいました。（console.log(array)したことが原因なのかは不明です。これを描いたあたりから変化がなくなっていたような気がするので。） やってみたこととしてはキャッシュの削除と.onの呼び出しの前にオブジェクトを削除することです。 ですが、やはりその変更点もconsoleに反映されてません。 初歩的かもしれませんがよろしくお願いします。
- ベストアンサー
- AJAX
- ｊｓ プログラムの意味
javascriptなのですがこのプログラムは何をしているのでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script> var methods = ['onMouse', 'onClick', 'onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel']; var text = this; function and(method, text) { return function() { return method.apply(text, arguments); }; } for (var i = 0, l = methods.length; i < l; i++) { text[methods[i]] = and(text[methods[i]], text); console.dir(text); console.log(text); } </script> </body> </html> console.dirとconsole.logで中身を見てみるも何をしてるのかわからなくて... 推測でも構わないので何かあればお願いします。説明不足でスミマセンm(__)m
- ベストアンサー
- JavaScript
- 即時関数でプライベート変数的になってる理由を教えて
即時関数内で、プライベート変数的な動きになっている(？)コードがあるのですが、呼び出せない理由を教えてください ・呼び出せる例1 (function() { hoge2 = 'ホゲ2'; })() console.log(hoge2); ・呼び出せる例2 (function() { var hoge1 = {}; hoge2 = 'ホゲ2'; })() console.log(hoge2); ・呼び出せない例 (function() { var hoge1 = {},hoge2 = 'ホゲ2'; })() console.log(hoge2); ■質問1 ・どうして呼び出せないのでしょうか？ ・varでローカル宣言(？)してるhoge1オブジェクトに紐づいているから？ ・つまり、hoge2オブジェクトを生成している場所が違う？ ■質問2 ・呼び出せない状態の時、hoge2はプライベート変数になっているのでしょうか？ ■質問3 ・そもそもどうして呼び出せるのでしょうか？ ・即時関数は(名前もしくはスコープ)空間を作り閉じ込めるので～、という記述を、どこかで見かけたような気もするのですが…
- ベストアンサー
- JavaScript
- [JS] private関数からオブジェクト参照
JavaScriptにて外部から使用する関数をpublicに、内部的に使用するだけの関数をprivateにしたく、 <http://d.hatena.ne.jp/brazil/20051028/1130468761>や<http://www.findxfine.com/programming/javascript/59.html>を参考に以下のようにしてみました。 func1はtestクラス内からしか呼び出せず、privateになっており、 func2はtestクラス外からも呼び出せて、publicになっているようです。 しかし、func2からfunc1を呼び出した際に、func2の呼び出しもとのオブジェクトを参照しようとすると undefinedになってしまいます。 var a = new test(); //a.func1(); // これはprivateなのでエラー a.func2(); // こちらはpublicなのでOK function test(){ var self = this; // private variable var data1 = 1; // public variable this.data2 = 2; // private function function func1(){ console.log(data1); // 1を表示 console.log(this.data2); // これがundefinedとなってしまう } // public function this.func2 = function(){ console.log(data1); // 1を表示 console.log(this.data2); // 2を表示 func1(); }; } どのようにすれば、オブジェクト変数を参照でき、 クラス内でのみ使用可能なprivate関数を定義できるのでしょうか。
- ベストアンサー
- JavaScript
- ES6を学んでいるのですが難しいです。
ES6を学んでいるのですが難しくて初心者にもわかるように解説していただけるとありたいです。 http://qiita.com/takeharu/items/cbbe017bbdd120015ca0 ＞＞＞ 関数で複数の値を一度に返す一度に関数で複数の値を返すことができます。今まではオブジェクトや配列に代入して返していました。 function getFruit() { return ['りんご', 'バナナ'];} ES6 var [fruit1, fruit2] = getFruit(); ES5 console.log(fruit1); // りんごconsole.log(fruit2); // バナナ ＞＞＞ 上記は function getFruit() { return ['りんご', 'バナナ'];} ES6 var [fruit1, fruit2] = getFruit(); ES5 ということだと思いますか？ そのような説明がないのでわかりにくいですが、 ・ ＞＞＞ 「...」演算子により、複数の値を一つの配列にまとめる「...」演算子を使用することにより、それ以降の値を一つの配列としてまとめることができます。 var [name, age, ...fruit] = ['ハル', 21, 'りんご', 'みかん']; console.log(name, age, fruit); // ハル 21 ['りんご', 'みかん'] また、「...」演算子を使用することにより、配列の展開もできます。 var array = [1, 2, 3]; console.log(array); // [1, 2, 3]console.log(...array); // 1 2 3 これにより今まで配列で最大値を求める場合は、applyメソッドを使用する必要がありました。しかし、展開することにより、簡潔に記述可能となります。 * Before var array = [1, 5, 3]; var max = Math.max.apply(null, array) console.log(max); // 5 * After var array = [1, 5, 3]; var max = Math.max(...array); console.log(max); // 5 ＞＞＞ var max = Math.max(...array);の部分がおそらく新しいのだと思いますが、nullが...になっているというのは、 どういう意味で、どんなメリットがあるのでしょうか？
- ベストアンサー
- JavaScript
- javascriptのコードについて
以下のコードなのですが、 エンクロージャー関数の ローカル変数hogeをさらに、エンクロージャー内部で定義された 関数ででクロージャーとして保持させたいメソッドのコードですが var Method = function (){ var hoge = "初期値"; var getter = function (){ return hoge; } var setter = function (param){ hoge = param; return hoge; } return {"set" : setter,"get" : getter} } var obj = Method(); console.log(obj); console.log(obj . get()); obj.set("初期値変更"); console.log(obj.get()); obj . set("更に変更"); console.log(obj.get()); この場合、メソッドの返り値として、一般的な文献に乗っている関数（関数オブジェクト）を返すのではなく オブジェクトリテラルとして返しています。 この場合でも、動きとしてはクロージャーの動きをしているのでhogeという変数の保持はできているっぽいんですが クロージャーって関数内で定義された関数であれば、どういう返り値の返し方でも クロージャーになるのですかね？ また、この方法は、一般的にjsで関数コンストラクタ呼び出しをしてインスタンスを作る際privateメンバを実現する方法として紹介されていますが、 これはクロージャーとして生成するたんびに内部の変数を保持するためメモリ食い虫になるらしいのですが まず間違いなく、このクラス（便宜上そう呼びます）のインスタンスはひとつしかつくることはない！！という仕様だとしても いけないのでしょうか？ というかもう現状javascripのバッドノウハウ的なものになっているのでしょうか？
- ベストアンサー
- JavaScript
- 最後に()が付いていない内側の関数を外から呼ぶ方法
下記状態の時、obj内容を一切変更することなく、console.log("a")を実行することは出来ない、という理解で合っているでしょうか？ ・最後に()演算子がないので、内側のgoo関数を実行することが出来ない ・外側のportalで、内側のgoo関数を呼び出していれば実行できるがその記述もない この場合、gooのvarは全く意味がない？ var obj = { portal : function() { var goo = function(){ console.log("a"); } } } var obj = { portal : function() { goo = function(){ console.log("a"); } } } ・obj.portal().goo() … × ・(obj.portal()).goo() … ×
- ベストアンサー
- JavaScript
- トリッキーなJSの文法（prototype.jsなど）が分かりません
Ajaxの「prototype」( http://www.prototypejs.org/ )などで 下記のようなfunctionの記述方法をよく見かけます。 ▼Prototype.js（ver1.5.0） 20行目抜粋 ---------------------------------------- var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } -------------------------------------------- でも、私には高度すぎて以下の点がどうしても読み解けません。 （1）var Class = {～～～～～～} が、何をしているのか分かりません。 配列なら[ ]ですし関数か何かを省略した宣言の記述方法なのでしょうか？ （2）create: が何なのか分かりません。必死で調べたら型を宣言しているような感じでしたが、 見慣れない「：」を使ったプログラムで検討もつきません。 私が知っているfunction宣言はこの2パターンのみしか知りません。 ・一般的なfunction宣言 function test(hikisu){ //処理内容 } ・無名関数でのfunction宣言 var a = function(x) { //処理内容 } ぜひ教えていただけませんでしょうか。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- console.logを使用して変数名と結果表示
console.logを使用して変数名とその中身を表示したいときに var hoge = 777; c("hoge", hoge); function c(a, b){ return console.log(a + ': ' + b); } ・・・とこのように書いているのですが これだと変数名を2回書かなくて効率が悪いです。 c(hoge)だけで変数名とその中身を表示する方法はないでしょうか？ ご存じの方がおられましたらご回答をよろしくお願い致します。
- ベストアンサー
- JavaScript
お礼
教えて頂いた通りやり直してみた所、 var layout; $win.on('load resize', function() { layout = $mediaQueries.css('content').replace(/"/g, ''); }); と入力することで書き換えを行うことができました。 以前もこの記述を試してみたつもりでしたが機能せず、何が悪かったのかは分かりませんが、今回おかげさまで解決することができました。 ご回答ありがとうございました。