jQueryの関数から変数を取得する方法とは?

このQ&Aのポイント
  • jQueryの関数から変数を取得する方法を教えてください。
  • 関数名を使って変数を取得し、別の関数で利用したいですが、どうすれば良いですか?
  • 単純な関数では関数名を利用して戻り値として取得することができますが、この場合はどのようにすれば良いのでしょうか?
回答を見る
  • ベストアンサー

jQueryの関数から変数を取得

次のうち変数valを取得してこれとは別の関数で利用したいのですが、どうやればこの変数を取得出来るのでしょうか? 単純な関数だと関数名を付けて戻り値にvalを指定してそれを呼び出してあげれば良いと思うのですが、この場合はどうしたら良いのか分からず頭を悩ませています。 var timer = false; var replaceWidth = 320; var prefWidth = parseInt( $( window ).width() ); $( window ).resize( function () { if( timer !== false ) { clearTimeout( timer ); } timer = setTimeout( function () { var self = $( this ); var windowWidth = parseInt( $( window ).width() ); if( windowWidth <= replaceWidth && replaceWidth < prefWidth ) { var val = 1; } else if( replaceWidth < windowWidth && prefWidth <= replaceWidth ) { var val = 10; } prefWidth = windowWidth; }, 200 ); });

noname#210746
noname#210746

質問者が選んだベストアンサー

  • ベストアンサー
  • sanzero
  • ベストアンサー率56% (58/102)
回答No.2

コードはよく読んでませんがif elseifなので通ってない可能性があります。elseを追加して試してみては。 width()の戻り値はintegerなのでparseIntは不要です。

noname#210746
質問者

お礼

ありがとうございました。

noname#210746
質問者

補足

ありがとうございます。 elseを追加してみましたが値は変わらず、もう少し考えてみようと思います。 var timer = false; var replaceWidth = 640; var prefWidth = $( window ).width(); var val = 0; $( window ).resize( function () { if( timer !== false ) { clearTimeout( timer ); } timer = setTimeout( function () { var self = $( this ); var windowWidth = parseInt( $( window ).width() ); if( windowWidth <= replaceWidth && replaceWidth < prefWidth ) { val = 5; } else if( replaceWidth < windowWidth && prefWidth <= replaceWidth ) { val = 10; } else { val = 15; } prefWidth = windowWidth; }, 200 ); }); console.log( val );

その他の回答 (2)

  • sanzero
  • ベストアンサー率56% (58/102)
回答No.3

一番下に書かれたconsole.log(val)は読み込んだ時しか走りません。 resizeされたときにvalの値が書き換わります。

noname#210746
質問者

お礼

ありがとうございました。

noname#210746
質問者

補足

当たり前の事なのに全く気付かずに見過ごしていました…。 細かなところまでアドバイスして頂き感謝しています。 ありがとうございました。

  • sanzero
  • ベストアンサー率56% (58/102)
回答No.1

valをprefWidthと同様に最初に宣言して、1とか10を代入しているところでvarを付けなければ、続いて記述した関数内で使えます。 javascript 変数 スコープ と言ったキーワードで検索してみてください。 その他 ・クッキーに持たせる ・セッションストレージに持たせる。 window widthってparseInt必要かな?

noname#210746
質問者

お礼

ありがとうございました。

noname#210746
質問者

補足

cookieやローカルストレージ等については今回は利用しない事を前提にしていますが、セッションストレージは便利そうですね…。 parseIntに関しては、確かクロスブラウザ対策で単位が付かないように数値化するのが目的だったと思います。 そして頂いた回答を元に関数の外で変数として宣言(値は0を指定)し、関数内varを付けずに記述してみましたが、変数として宣言した最初の値のまま変化しませんでした。

関連するQ&A

  • 無限ループ

    教えてください。 画面をリサイズすると画面再表示するようにしたいのですが、 下記のソースでは IE8で無限ループになります。 どこがおかしいのでしょうか? どのように直せばいいのでしょうか? jQuery(document).ready(function () { var timer = false; $(window).on("load resize", ReLayout); function ReLayout(event) { var _width = $(window).width(); var winWidth_resized; if(event.type == 'resize') { if (_width > 767) { if (timer !== false) { clearTimeout(timer); } timer = setTimeout( disp, 200); } } } function disp(){ location.href = location.href; } });

  • javascriptでの値の取得について

    すごく素人だと思うのですが。 この手のタイプで得られる値を外部で取得できないのでしょうか? 戻り値で返すわけにもいかないですし、よく理解できていません var val: ○.○=function(){ここで得た値をvalに入れたい} 例1 var target; ・・・ request.onreadystatechange=function(){ if(request.readyState==4 && request.status==200){ //target=request.responseText;みたいなことをしたい } } 例2 var width,height; ・・・ image.onload=function(){ //width=image.width; height=image.height;みたいなことをしたい }

  • setTimeout関数の使用方法について

    はじめまして。 質問があります。 以下のコードを実行すると、一定時間おきに文字の表示が変化する ように動いてくれません。何が問題なのかがまったく見当がつき ません。どなたかご指摘をお願いします。 ---------------------------------------------------------------- <html> <head> <title>setTimeout()関数の使用例</title> </head> <body onLoad="timer=setTimeout('changeChar()',500)"> <script type="text/javascript"> <!-- var str = "abcdefghijklmnopqrstuvwxyz0123456789"; var cnt = 0; function changeChar() { clearTimeout(timer); ch = str.charAt(cnt++); document.write(ch); if(str.length > cnt) { timer = setTimeout("changeChar()",500); } } //--> </script> </body> </html> ----------------------------------------------------------------

  • jQueryの関数内の変数について教えてください

    jQueryで外部の関数の中にある変数の値の取得方法について教えてください。 文法等全く分かっていない、初心者で大変恐縮しております。 外部にある変数の値を取得し、その値を必要な変数に代入したいと思っております。 下記に大まかなコードを記述いたしました。 サイトを開いた時に「mLivre」を実行し、リサイズ処理をした時に もう一度「mLivre」を実行しております。 「var mLivre」内にある数値を、「jQuery(window).resize」の中の 「 jQuery.fn.mLivre」の中にある変数に代入しようと思っております。 私のやりたいことは、「mLivre」というプラグイン(下記※参考サイト)を レスポンシブにしたいと思っております。 「mLivre」は画像を本の様にめくってくれるスクリプトです。 下記のコードの流れで、ブラウザサイズに合わせて表示の大きさを 変えることができましたが、リサイズするごとに初期化され ページが1ページ目からになってしまうので、 リサイズ後も変わらないページで表示させたいと思っております。 ※参考サイト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 全くの初心者で大変恐縮しておりますが、 ご享受いただけたらと思います。 また、記述についてもご指摘いらだけたら幸いです。 宜しくお願いいたします。 -------ソースコード---------- //実行外部ファイル jQuery('#slide').mLivre({ }); //コアファイル (function(jQuery) { jQuery.fn.mLivre = function(options,num) { }; jQuery(window).resize(function(){ var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 } jQuery.fn.mLivre = function(options,num) { //この中の変数に代入したい }; jQuery('#slide').mLivre({  //リサイズ後の実行部 }) ; }); })(jQuery); var mLivre={ //ここにある変数の値を取得してリサイズ内の jQuery.fn.mLivreに渡したい。 }

  • グローバル変数以外も変数は残り続ける?

    https://okwave.jp/qa/q9323518.html の続き var stoppingNow = false; がグローバル変数になっていないので仕様上はページ読み込み時に実行されて処理が終わった瞬間に この変数は削除されて使えなくなると聞いたのですが、 なぜかpauseBtnを押した後に、playBtnを押すと問題なく使えてしまいます。 グローバルにない変数は、stoppingNow = true;を実行してもそんな変数もうないとなるはずなのですよね? それともグローバルにない変数も残っていて、代入の処理よりも上、ないしは親のスコープにあれば使えるのが仕様なのですか? (function () { var stoppingNow = false; var pauseBtn = document.getElementById('js-pause-btn'); pauseBtn.addEventListener('click', function () { clearTimeout(it); stoppingNow = true; }); var playBtn = document.getElementById('js-play-btn'); playBtn.addEventListener('click', function () { if (stoppingNow === true) { iterative(); stoppingNow = false; } }); } myChange(); })();

  • jqueryのグローバル変数とローカル変数

    知識のある方に教えて頂きたいことがございます。 jqueryを何気なく組んでいたもので、基礎的なことがわかっておらず ご教示頂きたいのですが、 下記に記述した変数の(1)~(6)をどれが グローバル変数で、どれがローカル変数なのかご教示いただけますでしょうか。 関数の中は全てローカル変数になるという事を聞いたので、(3)と(4)はローカル変数、 プラグイン自体関数なので、(5)と(6)はローカル変数 (1)と(2)はグローバル変数だと考えておりますが、あっていますでしょうか。 どうかよろしくお願い致します。 $(function(){ var a = 0;//(1) b = 0;//(2) function Kansu(){ var c = 0;//(3) a = 1;//(4) } }) /* ----------------------------------------- */ (function($){ $.fn.testPlugin = function(options){ var d = 0;//(5) e = 0;//(6) } });

  • function()は無名関数?

    jqueryの$(function() は無名関数だと思いますが、redyが省略されているので、DOMを読み込み終わってから実行とも聞きます。 両方の意味があるのでしょうか? 一見ダダの無名関数に見えますがどのように区別するのでしょうか? 下記の部分もfunction()があるのですがこちらもまた無名関数のなのですか? ただ即時関数ではないので変数などに入れて、関数の呼び出しをしないといけないのにその記載がなくても実行されるのはなぜでしょうか? each(function() $(function() { $(".textbox").each(function(){ var labelText = $(this).val(); $(this).focus(function(){ if( $(this).val() == labelText ){ $(this).val(""); } }).blur(function(){ if( $(this).val() =="" ){ $(this).val(labelText); } }); }); }); 補足 $(".textbox").each(function(){ var labelText = $(this).val(); $(this).focus(function(){ if( $(this).val() == labelText ){ $(this).val(""); の部分は無名関数の中身、つまりこの関数が実行されるときの中身のことなのでしょうか? jqueryだと何となくこの書き方をしているのですがJSの基礎で考えるとそのようになりますよね?

  • PC用jQueryをスマホ対応にするには。

    初めて質問いたします。 初心者ですみません、困っています宜しくお願いいたします。 jQueryでブラインドをPCページに設置したところ動きましたが スマホではマウスでないためクリックしないとブラインドが反応しません。 jQueryモバイルがあると聞きましたがjavascriptのプログラムが分かりません。 可能であれば 下記のjsのプログラムの何処をどう変更を加えると PCのオンマウスとスマホのタッチ両方に対応・反応するのでしょうか。 お返事宜しくお願いいたします。 ******これ以降******* var slideMenu=function(){ var sp,st,t,m,sa,l,w,sw,ot; return{ build:function(sm,sw,mt,s,sl,h){ sp=s; st=sw; t=mt; m=document.getElementById(sm); sa=m.getElementsByTagName('li'); l=sa.length; w=m.offsetWidth; sw=w/l; ot=Math.floor((w-st)/(l-1)); var i=0; for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)} if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)} }, timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}}, slide:function(s){ var cw=parseInt(s.style.width,'10'); if(cw<st){ var owt=0; var i=0; for(i;i<l;i++){ if(sa[i]!=s){ var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10'); if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'} owt=owt+(ow-oi)}} s.style.width=(w-owt)+'px'; }else{clearInterval(m.timer)} } }; }();

  • スライダーの向きを変える

    以下はスライダーのスクリプトです。この状態だとスライダーの画像は右から左に 流れています。これを左から右に方向を変えたいと思うのですが、javascriptは よくわからないので、それらしきところをleftと書いてあるところをrightにかえたりしたのですが うまくいきません。どこを修正すればいいのでしょうか? //A-yo. ;) $(function(){ $(function(){ // options var options = { duration: 400, easing: 'easeOutCubic', auto: true, interval: 3000 }; // doms var $window = $(window), $container = $('#slider10'), $element = $container.find('ul'), $list = $element.find('li'), $next = $container.find('#next'), $prev = $container.find('#prev'), shift = 2, lw = $list.width(), len = $list.length, timer = ''; var $header = $('#header'), $headerAfter = $header.next(), headerY = $header.height(), containerY = $container.height(); function initialize(){ setup(); $window.on('resize', resize); $next.on('click', function(){ slide(true); }); $prev.on('click', function(){ slide(false); }); $window.on('scroll', scroll); load(); if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval); }; function setup(){ for(var i = shift; i > 0; i--) $element.find('li').eq(len - i).remove().prependTo($element); // div.layerを2つ追加する。 for(var i = 0; i < 2; i++) $('<div class="layer"></div>').insertAfter($element); // 上で追加したdivを変数に入れる $leftlayer = $container.find('.layer').eq(0); $rightlayer = $container.find('.layer').eq(1); // resize関数を呼ぶ resize(); }; function resize(){ var _val = ($window.width() - lw) / 2 - lw * shift; $element.css({ 'width': lw * len, 'left': _val }); $leftlayer.css('left', _val + lw); $rightlayer.css('left', _val + lw * 3); }; // アニメーションを管理する関数 function slide(direction){ // $elementがアニメーション中なら、処理しない if($element.filter(':animated').length) return; // ループを停止 if(options.auto) clearInterval(timer); // 移動を変数に入れる。引数がtrueなら-lw,falseならlw val = (direction)? -lw: lw; // アニメーションスタート。最後にコールバック関数を呼び出す。 $element.animate({ 'marginLeft': val }, options.duration, options.easing, callback); }; // slide関数実行後に呼び出す関数 function callback(){ // valが0より小さければ、最初のliを最後に移動させる。  // valが0より大きければ、最後のliを最初に移動させる。 (0 > val)? $element.find('li').eq(0).remove().appendTo($element): $element.find('li').eq(len - 1).remove().prependTo($element); // valが0より大きければ、最後のliを最初に移動させる。 $element.css('marginLeft', 0); // options.autoがtrueなら、ループを開始 if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval); }; // ヘッダーを固定する関数 function scroll(){ // スクロール量がcontainerYを上回ったら、関数_fixedを実行 // スクロール量がcontainerYを上回ったら、関数_staticを実行 (containerY <= $window.scrollTop())? _fixed() : _static(); function _fixed(){ $header.css({ 'position': 'fixed', 'top': 0, 'left': 0 }); $headerAfter.css('marginTop', headerY); }; function _static(){ $header.css({ 'position': 'static', 'top': '', 'left': '' }); $headerAfter.css('marginTop', ''); }; }; function load(){ var array = [$element, $next, $prev]; for(var i = 0; i < array.length; i++) array[i].css('visibility', 'visible'); $container.css('background', 'none'); }; $window.on('load', initialize); }); })(jQuery);

  • 「引数の書き方」と「メンバ変数とメンバ関数の名前」について、教えてくだ

    「引数の書き方」と「メンバ変数とメンバ関数の名前」について、教えてください。 クラス内のコード抜粋なのですが、下記はどういう意味なのでしょうか? ▼メンバ変数 var $j = true; ▼メンバ関数 function j($p = false){ if($p) $this->j = false; return $this->j; } $this->j(true); 分からないこと ・コードの意味全般 ・($p = false)と書かれている引数の意味 ・メンバ変数とメンバ関数の名前は同じでもよいか? 

    • ベストアンサー
    • PHP

専門家に質問してみよう