jQueryの変数について

このQ&Aのポイント
  • jQueryを使用して変数を切り替える方法について教えてください。
  • タブレット対応のために、クリックフラグに応じて異なる記述を実行したいです。
  • サムネイルを押した際に前回の押下を無効化し、別のサムネイルを押すと無効化が解除されるようにしたいです。
回答を見る
  • ベストアンサー

jqueryの変数について

jQueryについて教えてください。お願いいたします。 タブレット対応をしています。 clickFlgが0の場合はAの記述、 clickFlgが1の場合はBの記述を読み込みたいです。 実際やりたいことは一度目に押されたらリンクを無効化しその他の記述が 実行されて、次クリックしたらリンクが有効化されその他の記述が実行される ようにしたいです。 ただしサムネイルは複数あり、一度サムネイルを押して、違うサムネイルを押した 場合は最初押したサムネイルは一度も押されなかったことにしたいのです。 最初に宣言した変数が上書きされてしまっているため、 変数が切り替わってくれません。 どのようにすればいいか教えていただければと思います。 よろしくお願いいたします。 var clickFlg = 0; if(clickFlg == 0){ thumb.on('touchstart', function(){ clickFlg = 1; ~aの記述(リンクをきかなくする記述とその他)~ }); }else{ $thumb.on('touchstart', function(){ clickFlg = 0; ~Bの記述(リンクをきくようにする記述とその他)~ }); }

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

  • ベストアンサー
  • pa_cotta
  • ベストアンサー率43% (25/58)
回答No.1

押されたサムネイルがどれか、というのが分かればいいんじゃないでしょうか? 各サムネイルに番号をふっておいて、サムネイルが押されたらclickFlg変数の値とクリックされたサムネイルの番号を比較して、 値が違えばAの処理、同じであればBの処理、という方法でできそうな気がします。 もちろんclickFlg変数の初期値は設定の必要がありますし(マイナスとか0の値でいいんじゃないかと思います)、Aの処理を実行したあとにclickFlg変数の値をクリックしたサムネイルの番号に書き換える必要があります。

関連する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で外部の関数の中にある変数の値の取得方法について教えてください。 文法等全く分かっていない、初心者で大変恐縮しております。 外部にある変数の値を取得し、その値を必要な変数に代入したいと思っております。 下記に大まかなコードを記述いたしました。 サイトを開いた時に「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に渡したい。 }

  • 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の $(function(){ });

    jQueryについて基本的な質問をさせてください。 基本的にjQueryは、お約束として $(document).ready(function(){ }); と記述し、その中に実行処理を書いていくと思うのですが loadを待たずに実行させたい時は $(document).ready(function(){ });は記述しなくてもよいのでしょうか? どの本をみてもjQueryのお約束事みたいに $(document).ready(function(){ }); を必ず書くと載っています。 自分でやってみたところ、記述しないでも問題なく動いているのですが、 やっぱり $(document).ready(function(){ }); を記述しないと、何か問題があるのでしょうか? ご存知の方、教えてください。 どうぞ宜しくお願いたします。

  • jqueryについて【初歩】

    見ていただきありがとうございます。 jqueryについて初歩的な質問です。 下記の記述は ひとつのボックスに対して内包するaタグのリンクを指定してボックスごとリンクにしているスクリプトになりますが、これにtargetの属性を付加させたいです。 しかしいろいろ試しましたがうまくいかず、ツンでます… jqueryに精通している方宜しければご回答いただけませんでしょうか? よろしくお願いいたします。 $(function(){ $(".sampleBox").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });

  • jQueryスライドショーについて

    jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/alicex/45Jv 実際に配置して、ブラウザチェックを行ったのですが、 (1)Chrome・Firefoxだと、スライドショーを配置しているページから離れて 戻ってきた際に、離れていた時間分だけスライドショーのメインイメージが暴走 して、勝手に動いてしまいます。 (2)また、サムネイル上でカーソルを高速で通過させると、 させた分だけ記憶してメインイメージが変化してしまいます。 (1)のバグを無くしたいのと、(2)は、今カーソルを合わせている サムネイルに対応したメインイメージにすぐ変化して欲しいです。 jsに原因があると思うのですが、どの部分を修正すればよいでしょうか。 $(function() { var thumb = $("#thumbnail"); var main = $("#main"); $("li:first-child",thumb).addClass("on").children("img").hide(); $("li:not(:first-child)",main).hide(); slider(); $("li",thumb).hover(function() { $("li",thumb).removeClass("on").children("img").show(); $(this).addClass("on").children("img").hide(); num = $(this).index() + 1; mainSelector = $("li:nth-child(" + num + ")",main); mainSelector.fadeIn(); $("li",main).not(mainSelector).fadeOut(); }); }); function slider() { $("#thumbnail li img").show(); $("#thumbnail li.on img").hide(); c = $("#thumbnail li.on").index() + 1; c2 = $("#thumbnail li.on").index() + 2; mainSelector = $("#main li:nth-child(" + c + ")"); $(mainSelector).fadeIn(); $("#main li").not($(mainSelector)).fadeOut(); $("#thumbnail li").removeClass("on"); if (c2 == 6) { $("#thumbnail li:nth-child(1)").addClass("on"); }else{ $("#thumbnail li:nth-child(" + c2 + ")").addClass("on"); } timerID = setTimeout('slider()',3000); } 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。

  • jQueryの多重読込

    2つのHTMLがあり、両方ともjQueryプラグインを使っています。 今回、a.html側に、jQuery loadで、b.htmlを読込みました。 ■a.html jQuery 本体 jQueryUI jQueryForm jQuery.HashChanged など基本js(多数) ■b.html jQuery.Gallerific jQuery.Fancybox jQuery.fixPing などメディア系統js(多数) ■困っていること 両方とも、$(function(){ ... }) 構文を使って、DOMの展開完了を待っているのですが、「読込まれる側=b,html」の、$(function(){ ... }) がうまく働いていないようなのです。 b.html 単体では何の問題もないのですが、a.htmlにloadされると、遅延読み込みがききません。 元である a.html で全部のjQuery プラグインを読むのは重すぎるため、各々で必要なプラグインを都度、読むようにしたいのですが、その場合、読み込まれる側の実行遅延(DOM展待ち)はどのようにしたらいいでしょうか?

  • 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でloadしたページ内でもjQueryを使う方法

    例えば、base.html内にjQueryでadd.htmlをloadします。 base.htmlに下記コードを記述 $(document).ready(function(){  $("a").click(function(){   alert("click");   return false;  }); }); base.htmlに直接記述したaタグではアラートが出ますが、 base.htmlに読み込んだadd.html内のaタグでは適用されません。 Ajaxで読み込んだページ内にもjQueryを使用したい場合には、 どのようにすればよいのでしょうか?

  • jqueryで特定のIDに対して

    jqueryで特定IDのdiv要素にのみ実行する場合は どのように記述したらよいでしょう? $(function() { /* div#testの内容のみに実行*/ }); ご伝授いただけると助かります。 よろしくお願いいたします。

専門家に質問してみよう