外部変数を取得してjQueryの関数内の変数に代入する方法

このQ&Aのポイント
  • jQueryの関数内で外部変数の値を取得し、必要な変数に代入する方法について教えてください。
  • 私は「mLivre」というプラグインをレスポンシブにしたいと思っています。リサイズするごとに初期化されずに、リサイズ後も変わらないページで表示させたいです。
  • 参考サイトに記載されているコードを参考にしていますが、リサイズ後の実行部分で外部変数の値を取得して関数内の変数に代入する方法がわかりません。初心者のため、ご指導いただけると幸いです。
回答を見る
  • ベストアンサー

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に渡したい。 }

  • tsyok
  • お礼率90% (29/32)

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

内容は見ていませんが… >外部にある変数の値を取得し、その値を必要な変数に代入したいと思っております。 関数内での変数の定義のされかたによって、その外側から参照できる場合とできない場合があります。 ライブラリとして作られているものは、たいていの場合、作者が意図的に参照可能にしていない限り、そのままでは関数外からは取得できないと想像します。 >文法等全く分かっていない、初心者で大変恐縮しております。 カスタマイズするおつもりなら、まずそのあたりを理解しておくほうがよろしいでしょう。 http://builder.japan.zdnet.com/script/sp_javascript-kickstart-2007/20373861/ http://archiva.jp/web/javascript/variable_and_scope.html 具体的に参照を可能にする方法としては、  ・関数呼び出しの際に、引数や返り値として受け渡す。  ・両方を包含する関数内の変数、あるいはグローバルな変数として定義し直す。  ・参照可能なオブジェクトなどであれば、そのプロパティとして定義し直す。   または、get○○のようなメソッドを追加して、値を参照可能にする。 などが考えられそうな気がします。 いずれにしろ、まずは、もとのライブラリの全体構成を把握する必要があるでしょう。

tsyok
質問者

お礼

fujillinさま いつもご回答ありがとうございます。 (お礼が遅くなり大変申し訳ございません) 出来ました。 fujillinさまのおかげです! 本当にありがとうございます。 簡単な要約のコードです。 ※無理やり動かしている形ですが… -------コアファイル部---------- //コアファイル (function(jQuery) { jQuery.fn.mLivre = function(options,num) { }; jQuery(window).resize(function(){ var mLivre={ if (lien=='mLivreLienGauche') { //このあたりで下記のコードで値を取得 pagec = mLivre.donne[idDonne].page; //これで取得 } jQuery.fn.mLivre = function(options,num) { }; jQuery('#slide').mLivre({  //リサイズ後の実行部 //取得した値をオプションに代入 pageDefault:pagec, }) ; }); })(jQuery); var mLivre={ if (lien=='mLivreLienGauche') { //このあたりで下記のコードで値を取得 pagec = mLivre.donne[idDonne].page; //これで取得 }

関連するQ&A

  • 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) } });

  • jQuery 変数の代入

    jQuery 変数の代入 jQueryを使って.nextを押すごとに#areaに表示する画像を img1.jpg、img2.jpg、img3.jpg、、、、 と切り替えたいと思っているのですが、 下記のように書いても変数が入ってくれません…。 どのように記述すればよいでしょうか? よろしくお願いします。 $(function(){ var i=1; $(".next").click(function(){ i++; $("#area").attr("src","img",i,".jpg"); }) })

  • jQueryリサイズ処理と記述でご指摘ください。

    jQueryプラグインで、「mLivre」というプラグインを使っております。 ※mLivre:[JS]雑誌をめくるようにぺらっと画像を表示するスクリプト http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-mlivre.html 「mLivre」は画像をめくるように表示してくれるプラグインです。 このプラグインをレスポンシブにしたいと思い、リサイズ命令でブラウザサイズに合わせて 大きさを変えていきたいと思っております。 現時点で画像の表示自体はリサイズ出来ておりますが、 ページをめくる動作でアニメーションの表示が上手くいきません。 一番初めの数値(ページを開いた時点での数値)を記憶しているのか、 一番初めに表示されていた場所から画像がめくられてしまいます。 (説明が下手で申し訳ございません) 素人で恐縮ですが、私の記述で間違っているところがあり 私自身、間違いに気付けない状態です。 下記にコードを記述いたしました。 ご指摘いただければと思います。 ---------「mLivre」呼び出し部---------- jQuery(function() { var imgWi; var imgHi; var winWi; var scaleWi; var setWi; var setHi; setSize(); jQuery('#slide').mLivre({ pageDefault:0, over:true, loader:true, eventLoad:null, eventOpen:null, width:setWi, height:setHi, dossier:'http://URL/images/slide/', //画像 }); function setSize() { //画像サイズ指定 imgWi = 500; imgHi = 375; winWi = jQuery( '#branding' ).width(); scaleWi = winWi / imgWi; setWi = winWi; setHi = imgHi * scaleWi; jQuery("#slide img").width(setWi); //画像の大きさ jQuery("#slide img").height(setHi); } }); ------「mLivre」コア部---------- //11行目はじまり (function(jQuery) { jQuery.fn.mLivre = function(options,num) { switch (options) { //switch部 略 // break; } //↓追加したリサイズ部 jQuery(window).resize(function(){ var imgWi; var imgHi; var winWi; var scaleWi; var setWi; var setHi; imgWi = 500; imgHi = 375; winWi = jQuery( '#branding' ).width(); scaleWi = winWi / imgWi; setWi = winWi; setHi = imgHi * scaleWi; jQuery("#slide img").width(setWi); //画像の大きさ jQuery("#slide img").height(setHi); var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options); jQuery(this).each(function() { var $obj=jQuery(this); opts.width = setWi; opts.height = setHi; jQuery(".mLivre").width(setWi); //プラグインの大きさ jQuery(".mLivre").height(setHi); }); }); //↓元々の記述、変更していません var opts = jQuery.extend({}, jQuery.fn.mLivre.defaults, options); jQuery(this).each(function() { var $obj=jQuery(this); //省略 })(jQuery); var mLivre={ //ここからが処理部(アニメーション)だと思います。(変更していません) progress:false, //省略 }); } }

  • jQueryの記述についてご指摘ください。

    jQuery初心者で大変恐縮ですが、質問させていただきました。 「mLivre」というプラグインを使用しております。(下記URLを参照ください) ※参考サイト 雑誌をめくるようにぺらっと画像を表示するスクリプト -mLivre http://coliss.com/articles/build-websites/operation/javascript/jque... このプラグインは本をめくるように画像を表示してくれるプラグインです。 レスポンシブでも動くようにしたいと思い、コードを記述してみました。 画像自体はレスポンシブになりましたが、プラグインの動作が少しおかしくなってしまいました。 リサイズすると、めくる様な動作をしてくれますが、画像が切り替わらなくなってしまいました。 原因は、リサイズ時に画像の枚数のカウントがおかしくなっているせいだと思いますが、 どう変えればいいのかわからずに困っております。 「mLivre.js」自体はいじっておりません。 スクリプト実行部分に記述を追記いたしました。 下記にコードを記述いたしましたので、もしよろしければご指摘いただければと 思います。 よろしくお願いいたします。 ------------コード--------------- jQuery(document).ready(function() { var imgW; var imgH; var winW; var scaleW; var setW; var setH; setSize(); //リサイズしたら実行 jQuery(window).resize(function(){ setSize(); }); function setSize() { //元の画像サイズ指定 imgW = 500; imgH = 375; //横幅に合わせて縦幅の調整 winW = jQuery( '#page' ).width(); scaleW = winW / imgW; setW = winW; setH = imgH * scaleW; //要素の画像サイズ jQuery("#slide img").width(setW); jQuery("#slide img").height(setH); //実行部分 jQuery('#slide').mLivre({ width:setW, height:setH, dossier:'http:/画像のURL/images... }); } });

  • jQuery 同じ処理を関数にまとめたい

    jQueryでプログラムを書いています。 同じ処理が複数出てきているので一まとめにしてて見やすくしたいのですが・・・・ やり方がわかりません。 たとえば、 $("#id1").on("click",function(){ var num1=1; var num2=2; var a; a=num1 + num2; alert(a); }) $("#id2).on("hover",function(){ var num3=3; var num4=4; var b; b=num3 + num4; alert(b) }) のようにほぼ同じ処理を違うイベントで行う場合です。 関数自体は作れるのですが、、、、 function calc(numa,numb){ alert(numa+numb); } jquery内でjavascript(Java?)の関数は使えないというのを聞いたことがあります。 どのようにすれば使ええるのでしょうか?

  • jquery cycleで画像リサイズ

    jquery cycle pluginを使用して、画像のスライドをしています。 画像を画面中央に全画面表示をしたいのですが、 スライドする画像のサイズがそれぞれ異なるため、 画像の比率を固定して、縦横のサイズで大きい方を 画面に合わせて表示したいのです。 私が考えたのは、 (全文は載せられません。すみません。) <div id="slideImage"> <img id="slide1" src="test01.gif"> <img id="slide2" src="test02.gif"> ・・・ <img id="slide5" src="test05.gif"> </div> ↑のようにスライドする画像があるとして、 下記のjavascriptでスライドする画像分ループさせて、 id部分を変数にして、縦横どちらかが大きかったら・・・という 計算をしています。 function resize(){ for(var i=1; i<6; i++){ var slideNo = "slide" + i; var w = document.getElementById(slideNo).width; var h = document.getElementById(slideNo).height; if(w >= h){ document.getElementById(slideNo).width = screen.width; }else{ document.getElementById(slideNo).height = screen.height; } } } 確かにこれだとidがslide1の場合はサイズをリサイズしてくれるのですが、 slide2以降をリサイズしてくれません。 ループは確かに回っているし、 if文の前でリサイズ前の画像サイズをちゃんと取得しているのですが、 なぜかscreen.width(screen.height)の値が入ってくれません。 jquery cycle pluginだとそれぞれの画像のリサイズはできないのでしょうか。 みなさんお力お貸しください!!

  • 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 ); });

  • jQueryのvar jQueryの仕組みについて

    jQuery-1.6.2のソースコードを見ているのですが質問させてください。 25行目の var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }, そして100行めの jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { の意味が分かりません。 PHP等のclassになれているとJSのクラスは戸惑うことが多いのですが、この例は最たるもので、自分の中のJSでのclassは (1)スーパークラスのプロパティをcall()、apply()で継承 (2)スーパークラスのメソッドをprototypeオブジェクトで継承 (3)インスタンスのデータ型判定に必要なプロパティをconstructorで調整 だったのですが、スーパークラスがどの行のどれなのかも分かりません。 型やメソッド名からこれらがclassを意味しているのは分かるのですが、いったいどの部分がclass定義、継承を行っているのか教えていただけませんでしょうか? なぜこれらがclassになっているのかが理解できません。 分るのは、jQuery.prototype.constructor = jQueryで、それをjQuery.fnに代入((3))している事です。 329行目の、jQuery.fn.init.prototype = jQuery.fn;の右辺がnew {$class}の形であれば(2)のプロトタイプチェーンの形だと分るのですが。 (1)は、init内でメンバ変数を定義したりしているので、classなのかな、という程度しか分っておりません。 jQuery.fnがコンストラクタで、jQueryがインスタンスで、var jQueryは親クラスをinitしたもの?・・・と混乱しております。 質問内容も文章が混乱していて申し訳ないです。

  • jQueryで困っています。教えてください。

    スムーススクロールを導入しようと、いろいろ調べて以下のものを参考にさせていただこうと考えています。どうゆう流れになっているのかを調べて分からないことがあったので投稿させていただきました。var target = jQuery(href == "#" || href == "" ? 'html' : href);この行の意味がわかりません。また、targetに何が代入されているのか分かりません。回答よろしくお願いします。 jQuery-------------------------------------------- //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed); return false; }); });

  • jQueryのCSSで値に変数を使う方法

    jQueryでCSSを設定する際、 $("div").css("プロパティ","値"); とすると思いますが、この値の部分に変数を利用することはできないのでしょうか。 何がしたいかというと、for文の中で乱数を発生させ、それを値として使いたいのです。 for(i=0; i<10; i++){ var num = Math.floor(Math.random()*100); $("div:eq(i)").css("width",num); } このように書いてみましたが駄目でした。 値に変数を使う方法はありませんでしょうか。 できない場合、このような方法(CSSの値に乱数を使う)を実現できる方法はありませんでしょうか。

専門家に質問してみよう