• ベストアンサー

jsの実行について

index.htmlでcommon.jsを読み込んでいます。内容は書きの通りです。 $(document).ready(function() { //実行1 $.updnWatermark.attachAll(); //実行2 $('textarea.resizable:not(.processed)').TextAreaResizer(); //実行3 $('#hoge img').hover(function(){ $(this).fadeTo(100, 0.6); },function(){ $(this).fadeTo(200, 1.0); }); }); ページにより異なるのですが全ての実行を必要とするページもあれば実行1と実行2は必要とせず 実行3だけ必要なページの場合もあります。 その場合には実行1と実行2に必要なjsは読み込まないのですがそうすると実行3が機能しなくなります。 必要なjsを読み込んでないのでうまく処理できずエラーになっているのでしょうか？ 実現したい事はcommon.jsは現状の通り実行するfunctionの定義リストとしページに異なり 実行するものを選定したいのですがどうすればできるのでしょうか？ 単純に実行したいhtml内に直接functionを書けば問題ないのですができればcommon.jsでまとめたいと 思っております。 このような事が実現できる方法がございましたら教えてください。宜しくお願いします。

  • dcx147
  • お礼率33% (214/636)

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

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

＞○○ページとxxページ(複数のページ)で利用したい場合にはどうする ＞べきかという質問でした。 通常はスクリプトを外部ファイルにしておいて、同じものを複数ページで利用する方法をとります。 その際に#1様のおっしゃるように、共通性のあるものはまとめ、個別のものは個別にしておくなど整理しておけば、読み込む側で選択できるので面倒なケースわけする必要もなくなるのでは？ 例えば… --- PAGE1.html--- <html> <head> <script type="text/javascript" src="/js/common.js"></script> <script type="text/javascript" src="/js/実行1.js"></script> </head> <body> 　・・・・・ --- PAGE2.html--- <html> <head> <script type="text/javascript" src="/js/common.js"></script> <script type="text/javascript" src="/js/実行2.js"></script> <script type="text/javascript" src="/js/addition.js"></script> </head> <body> 　・・・・・ --- PAGE3.html--- <html> <head> <script type="text/javascript" src="/js/実行3.js"></script> </head> <body> 　・・・・・ みたいな感じ。 質問の意味を勘違いしていましたら失礼。

dcx147
質問者

お礼

お返事ありがとうございます。 必要な処理でまとめて外部ファイル化して必要な分だけ読み込むという方法ですね。 1つのjsでそのような事をやろうとしていたのがそもそもの間違いだったようなので そのような方向でまとめてみたいと思います！

その他の回答 (2)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

それでしたら、そのjsが読み込まれているhtmlファイル名を 取得して、ケース分けするしかないかと 例えば、 switch(window.location.href){ case "http://xxx.yyy.zzz/○○.html": ------ break; case "http://xxx.yyy.zzz/××.html" || "http://xxx.yyy.zzz/△△.html" ------ break; default: ----- break; } とか、 自分が読み込まれているhtmlファイル名取得のメソッド って何かあったかなあ

dcx147
質問者

お礼

お返事ありがとうございます。 jsは全くわからないのでひとまずアドバイス頂いた方法で試してみたいと思います。 この他に方法があれば引き続き回答をお待ちしております。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

各htmlに共通の処理のみcommon.jsにまとめ、個別の処理は個別のjsにして 各々のhtmlに追加ロードさせるのが、最も管理しやすいと思うのですが、 それがcommon.jsを使うの発想だったんではないですか？ 何のためにまとめたいのかがわかりません。

dcx147
質問者

お礼

お返事ありがとうございます。 目的はその通りなのですが単純に○○ページだけのみ使用するとの事であればhtmlに書くのですが ○○ページとxxページ(複数のページ)で利用したい場合にはどうするべきかという質問でした。 情報不足だったようで申し訳ございません^^;

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • jsから呼び出されるphpの実行の順番

    環境：OS-XP, IISver6.0, PHP4, Jacascript, HTML HTMLからjsの関数を３つ呼び出し、そのうち１つ目の関数がPHPを呼び出すプログラムで、思い通りの動きをしないことからデバッグしていったところ、js内の３つの関数を実行してからPHPの関数を実行しているようでした。なぜこのような動きになるか教えてもらえませんでしょうか。 想定していた実行順序：☆ デバッグした時実行された順：※ .html onchange="fTest(this)" ※1 ☆1 .js function fTest(obj){ getInfo(obj); ※2 ☆2 getMore(obj); ※3 ☆4 setInfo(obj); ※4 ☆5 } function getInfo(obj){location.href = "Info.php?status=getInfo"; } function getMore(obj){} function setInfo(obj){} .php if($status == 'getInfo'){-略- ※5☆3} 宜しくお願いします。

  • 複数のjavascriptを使うと動かなくなる

    下記にようにナビゲーションにljavascriptを使うと、ightboxを同じページに設置すると機能しません。 こういう場合どうすればいいでしょうか？ <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>

  • jqueryについて困っております。

    下記のスライドショーを同一ページ内に複数つけたいのですが、 バグがでてしまいます。 おそらく変数がバッティングしてしまっていて、photogallery1とphotogallery2が 干渉しあわないようにしたいのですが、どのようにしたらいいかわかりません。 ご教示いただければ幸いです。 すみません大変急いでおりまして、出来ればすぐに皆様のお力を貸していただければ と思っております。よろしくお願いいたします。 $(function(){ pg('#photogallery1'); pg('#photogallery2'); function pg(selector){ $(selector).each(function(){ var photo = $(".photoBox").find('li'); var thumb = $(".thumbBox").find('li'); var fadeSpeed = 400; var changeSpeed = 4000; var photoLength = photo.length; var nowBox = 0 photo.filter(":not(':eq(0)')").hide(); var timer = setInterval(slideshow , changeSpeed); function slideshow(){ if(nowBox == photoLength - 1){ photo.fadeTo(fadeSpeed , 0); nowBox = 0; photo.eq(nowBox).fadeTo(fadeSpeed , 1); }else{ photo.fadeTo(fadeSpeed , 0); nowBox ++; photo.eq(nowBox).fadeTo(fadeSpeed , 1); } }; thumb.hover(function(){ clearInterval(timer); $(this).stop().fadeTo(fadeSpeed , 0.6); nowBox = $(this).index(); photo.stop().fadeTo(fadeSpeed , 0) .eq(nowBox).stop().fadeTo(fadeSpeed , 1); },function(){ timer = setInterval(slideshow , changeSpeed); $(this).stop().fadeTo(fadeSpeed , 1); }); }); }; });

  • 一秒後に実行するようにしたところ全く動かない

    一秒後に実行するようにしたところ全く動かなくなってしまいました。 ・これは動く //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); ・これが動かない //一秒後に実行 // setTimeout(function(){ // $(this).addClass('scrollin'); // },1000); //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right--delay-one-s').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); } }); }); }); ・下記に間違いがあるのでしょうか？ if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); }

  • jqueryについて

    サムネイルをマウスオーバーすると#targetに拡大画像を表示するものなのですがマウスオーバーで 切り替わりマウスアウトで元に戻るとこまではいいのですがフェードが全く効きません。 いろいろ試したところ$(".thumbnail a img")に変えるとフェードはするのですが今度は画像が 切り変わらなくなってしまいす。両者実装するにはどのように書き換えればいいのでしょうか？ $(document).ready(function() { var originSrc = $("#target").attr("src"); $(".thumbnail a") .fadeTo(1,1) .hover( function() { var changeSrc = $(this).attr("href"); $("#target").attr("src", changeSrc); $(this).fadeTo(200, 0.5); }, function() { $("#target").attr("src", originSrc); $(this).fadeTo(500, 1); } ) });

  • jquery not()がきかない

    jqueryについて１点だけ教えて頂きたいことがございます。 今、下記のjqueryにてロールオーバー時のイベントを実行しています。 $('a:not(.current) img').each(function() { var target = $('a:not(.current) img') target.hover(function(){ $(this).stop().fadeTo(500,0.6); }, function() { $(this).stop().fadeTo(500, 1); }); }); それともう一つjqueryである一部分だけ違うロールオーバーにしたく、 全体にかかる上記のjqueryで、#photogalleryというID以外の(a:not(.current) img)にしたいのですが、 ('a:not(.current) img')を $('div').not('#photogallery').find('a:not(.current) img') このようにしてみたのですが、#photogalleryまで実行されてしまいます。 調べて見たのですがわからず、教えて頂ければ幸いです。 どうぞ宜しくお願い致します。

  • jsファイルをhtml内で実行したい

    広告を入れ替えるjavascriptファイルがネット上で公開されているのですが それを使うにはjsファイルをダウンロードしてからサーバーにアップして、別途、htmlに実行させる記述を行えと書いていまして それは解説どおりにやればできたのですが、 この度、事情により、そのｊｓファイルを外部ファイルとしてではなく、html内に組み込みたい(組み込まなければならなくなった)のですが 素人でも簡単にできますか？ jsファイルをメモ帳で開いてコピペして、実行する記述を追加すれば作動しますか？ もし答えがＹＥＳなら実行する記述もご教示願います。 jsファイルの内容は次のとおりです。 function rotationAdv() { m = 0, x = 0, y = 0; ad = new Array(); adv = new Array(); hit = new Array(); // 広告0 hit[0] = 1; adv[0] = '広告タグ'; // 広告1 hit[1] = 1; adv[1] = '広告タグ'; // 広告2 hit[2] = 1; adv[2] = '広告タグ'; for(i=0; i<=hit.length - 1; i++) { m += hit[i]; } n = Math.floor(Math.random() * m); n++; for(i=0; i<=hit.length - 1; i++) { x = y; y += hit[i]; if(x<n && n<=y) ad = adv[i]; } document.write(ad); } 困っております。よろしくお願いします。

  • サムネイルにマウスオーバーでメイン画像が切替るjs

    <script type="text/javascript"> //<![CDATA[ $(function(){ var sets = [], temp = []; $("div.pickupArea div.pickupBox").each(function(i) { temp.push(this); if (i % 4 == 3) { sets.push(temp); temp = []; } }); if (temp.length) sets.push(temp); $.each(sets, function() { $(this).flatHeights(); }); n = 1; timerID = setInterval("anime()", 6000); $("ul.imgNav img:gt(0)").fadeTo(0,0.3); }); function anime() { now = n; before = n == 0 ? 3 : n - 1; n++; thumbN = $("ul.imgNav a:eq(" + now + ") img"); thumbB = $("ul.imgNav a:eq(" + before + ") img"); url = $("ul.imgNav a:eq(" + now + ")").attr("href"); img = "http://xxxxxxxxxxxx/xxxx/images/img_main0" + n; $("div.mainImg a").before("<a href='" + url + "'><img src='" + img + ".jpg' alt='' /></a>"); thumbB.fadeTo(1500,0.3); thumbN.fadeTo(1500,1); $("div.mainImg img:last").fadeOut(1500,function(){ $(this).remove(); $("div.mainImg a:last").remove(); }); if(n == 4){ n = 0; } } //]]> </script> 現在このようなスクリプトが入っており、 サムネイル４枚とメイン画像を（４枚中）１枚分だけ表示しているエリアがあり、メイン画像とサムネイルが自動で切り替わるようになっています。 このｊｓですと、サムネイルにマウスオーバーしてもメイン画像が切り替わらない仕様になっています。 サムネイルにマウスオーバーしても動くjsに改変するにはどこを修正すればよろしいでしょうか？ ご回答よろしくお願いいたします。 これをサムネイルに

  • jQueryでホバーされていない要素を半透明にする

    http://www.skuare.net/test/jopacity_show.html 下記のようにスクリプトがありますが、いまいちわかりません。 画像の場合　<li><img src=hoge.gif title="menu 1"></li>でよろしいのでしょうか？ <ul id="menu"> <li>menu 1</li> <li>menu 2</li> <li>menu 3</li> <li>menu 4</li> </ul> 「menu 1」にマウスオーバーされた際に、ほかの2-4が半透明になるイメージです。 まずはjQueryからjquery.jsをダウンロードします。 その後、以下のようなscriptを記述します。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#menu').children().hover(function() { //#menuの子要素にマウスオーバーした時の処理 $(this).siblings() //その要素の兄弟要素をすべて取ってきて .stop().fadeTo(500,0.5); //500ミリ秒かけて、opacity0.5まで変化させます }, function() { //マウスアウトの処理 $(this).siblings() .stop().fadeTo(500,1); //戻します }); }); </script>

  • onChange2回実行

    すみません。 今は下記のようにjquery.1-4-2.min.jsを利用しています。 -------------------------------------- $(function() { var el; $("select.default") .each(function() { el = $(this); el.data("origWidth", $(this).css("width")) }) .mouseenter(function(){ $(this).css("width", "auto"); if(($(this).context.clientWidth)< Number($(this).data("origWidth").replace(/px/,"")) ||"100%" == $(this).data("origWidth")){ $(this).css("width", $(this).data("origWidth")); } }) .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); }); }); ------------------------------------ Htmlでselectドロップダウンについて、onchange=onUserChange(value)をします。 但し、select dropdownを選択したら、このonUserChangeが二度呼び出されました。 ソースDebugし、下記のJquery利用するため二度実行します。 ----------------------------------- .bind("blur change", function(){ el = $(this); el.css("width", el.data("origWidth")); }); ------------------------------------ どうしてonUserChangeが二度実行しますか。私は一回だけ欲しいです。。。 ご教えていただけませんか。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する