• 締切済み

JavaScriptの繰り返しを簡略化したい

下記のJavaScriptを簡略化したいと考えています。 $(document).ready(function(){  $("#A").jPlayer({   ready: function () {    $(this).jPlayer("setMedia", {     mp3:"documents/alfa/A.mp3"    });   },   swfPath: "js",   supplied: "mp3",   cssSelectorAncestor: "#A",   wmode: "window"  });  $("#B").jPlayer({   ready: function () {    $(this).jPlayer("setMedia", {     mp3:"documents/alfa/B.mp3"    });   },   swfPath: "js",   supplied: "mp3",   cssSelectorAncestor: "#B",   wmode: "window"  });  $("#C").jPlayer({   ready: function () {    $(this).jPlayer("setMedia", {     mp3:"documents/alfa/C.mp3"    });   },   swfPath: "js",   supplied: "mp3",   cssSelectorAncestor: "#C",   wmode: "window"  }); }); 3回繰り返していますが、違いは一部分だけです。 #A、A.mp3、#A #B、B.mp3、#B #C、C.mp3、#C どのように記述したら簡略化できるのでしょうか。 よろしくお願いします。

みんなの回答

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

#1です。 まったくわかりませんが、補足からどうやらjQueryベースらしいことだけはわかったので… こんなのでは? (全角空白は半角に変換のこと) $.each(["A","B","C"],function(){  $("#"+this).jPlayer({   ready: (function(id){    return function(){     $(this).jPlayer("setMedia", {      mp3:"documents/alfa/" + id + ".mp3"     });    };   })(this),  swfPath: "js",  supplied: "mp3",  cssSelectorAncestor: "#"+this,  wmode: "window"  }); });

全文を見る
すると、全ての回答が全文表示されます。
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

何のライブラリなのかわかりませんが… もしも $.each(["#A","#B","#C"], function(){  alert(this); }); のようなメソッドが使えるなら、関数内に一度記述することで処理可能ではないでしょうか。

Java-Java
質問者

補足

jPlayerというのをいじっています。 http://www.jplayer.org/ 色々いじってみて多次元配列というのを利用してみました。 var sounds = [  ['#A','A.mp3','#A2'],  ['#B','B.mp3','#B2'],  ['#C','C.mp3','#C2'] ]; $(document).ready(function(){  for (var i = 0; i < sounds.length; i++){   $(sounds[i][0]).jPlayer({    ready: function () {     $(this).jPlayer("setMedia", {      mp3: sounds[i][1]     });    },    swfPath: "js",    supplied: "mp3",    cssSelectorAncestor: sounds[i][2],    wmode: "window"   });  } }); うまくいくかと思っていたのですが、 「mp3: sounds[i][1]」の部分だけが展開してくれず、そのまま文字列が表示されてしまいうまくいきません。もしわかるようでしたらご教授下さい。 よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • JavaScriptプラグインが読み込めません

    「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。 MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に <script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script> <script type="text/javascript" src="easyslider1.7/js/jquery.js"></script> と記述し、 <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto:true }); }); </script> で動作させようとしているのですが、 ブラウザで試すと動かず、コンソールには ReferenceError: Can't find variable: jQuery TypeError: Result of expression '$("#slider").easySlider' [undefined] is not a function. と出てきます。 上段の”jQuery”はeasySlider1.7.js内に記述されているものです。 ちなみにgoogleAPIのjQueryをロードしても同じエラーが出ました。 何が原因なのでしょうか。ご回答宜しくお願いします。

  • <body>にwindow.onload = functionを2つ設定すると、最後に書いたイベントだけが実行されてしまいます。

    <body>タグにonloadイベントを実行させる2つの外部jsを<head>内に設置し実行すると、 最後に記述したイベントだけが反映されてしまいます。 http://blog.webcreativepark.net/2008/02/26-185844.html を参考にいろいろといじってはみたのですが、 function addEvent(elm,listener,fn){ try{ elm.addEventListener(listener,fn,false); }catch(e){ elm.attachEvent("on"+listener,fn); } } js初心者でして、上の関数の中にどのように記述をすれば良いのかわかりません。 IE6・IE7・safariで動作させるには、実際にどのようなソースを書けばいいのでしょうか。 どなたかご教授いただけますでしょうか。 <head>内の外部jsは、以下のように記述しました。 <script src="/A.js" type="text/javascript"></script> <script src="/B.js" type="text/javascript"></script> </head> 外部jsのソースは以下になります。 //A.js window.onload = function() { var blur = function () { this.blur() }; for (var i = 0; i < document.links.length; i++) document.links[i].onfocus = blur; } //B.js window.onload = function() { prepZooms(); insertZoomHTML(); zoomdiv = document.getElementById(zoomID); zoomimg = document.getElementById(theID); } 以上になります。宜しくお願い致します。

  • JavaScript インクリメントの書き方

    JavaScriptのインクリメントをその都度追加する事がないように for文などで作りたいのですが、上手く動きません。 どの様な書き方をすれば良いかご教授いただきたいです。 よろしくお願いいたします。 =================================== $(document).ready(function(){ $("#navi li#n01 a").click(function () { $("#navi li#n01 ul").slideToggle("slow"); }); }); $(document).ready(function(){ $("#navi li#n02 a").click(function () { $("#navi li#n02 ul").slideToggle("slow"); }); }); $(document).ready(function(){ $("#navi li#n03 a").click(function () { $("#navi li#n03 ul").slideToggle("slow"); }); });

  • $(document).readyとloadの違い

    ■質問1 jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか? 下記理解で合ってるでしょうか? ●$(document).ready(function() ・複数回実行できる ・ページを全て読み込んだ後に実行 ・ページの下部に記述しなくとも良い ●$(window).load(function() ・複数回実行できない(最後の1回が実行される) ・ページ読込開始時点で実行(正確には記述位置に来た時点?) ■質問2 「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか? ・どちらも同じ? 「$(window).load(function()」V.S「window.onload = function(){」

  • 複数の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>

  • javascriptでwavファイルを開く

    はじめまして、よろしくお願いします。 javascriptで以下のように記述しました。 function ans() { if( document.q1.a[1].checked == true ) { window.open('t.html','b'); window.open('kotae_1.html','c')}        ☆ } (略) <input type="button" value="答えは?" onClick="ans()"> これは、答えは?をクリックするとフレームbにt.htmlが、フレームcにkotae_1.htmlがそれぞれ表示される。ということです。 そこで答えは?ボタンをクリックするとhtmlの表示と一緒に音(t.wav(ファイル名))を鳴らしたいのです。この場合☆の部分にどのように記述すればいいのですか? 稚拙な文章ですがよろしくお願いします。

  • IEだけで動きません。Javascriptに関する質問です。

    IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう? 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html>   <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script>   </head> <body>   <div id="container">   </div>       <div id="menu">    <ul>    <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li>    <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li>    <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li>    </ul>   </div>     </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html>  <head> <script type="text/javascript" src="bbb.js"></script>  </head>   <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div>   </body> </html>

  • JavaScriptコードの最適化

    JavaScript、超初心者です。 よくわからないので、同じコード3つ書いています。 もっと簡単に最適化されたコードはどう書けばよいですか? 宜しくお願いします。 $(function () { $(".aaa").click(function(){ window.open($(this).find("a").attr("href"), '_blank'); return false; }); $(".bbb").click(function(){ window.open($(this).find("a").attr("href"), '_blank'); return false; }); $(".ccc").click(function(){ window.open($(this).find("a").attr("href"), '_blank'); return false; }); });

  • 静的と動的なJavascriptの同時利用について

    動的に生成されたJavascriptファイルと 静的(固定)に生成されたJavascriptファイルを 同じ関数で使用したいのですが方法ありますでしょうか? function内から外部ファイルを読む事は不可でしょうか? ◆kotei.js(静的Javascript) function a { a = a; // ここでgenerate.jsを読みこみたい } ◆generate.js(固定Javascript) c = 1; d = 2; 上記に限らず、通常は、 動的なJavascriptと静的なJavascriptを組み合わせる場合どのような形でHTMLから利用するのが良いでしょうか?

  • javascriptについて教えてください。

    divのボタンを作りたいと思い、調べながらjQueryを使う方法は以下のようにしたらいい事は分かったのですが、jQueryを使わずにしようと思い $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); の部分を document.getElementsByTagName("div").onclick = function(){ var x = this.id;  alert(x); }; としてみたのですが、うまくいきません。jQueryを使わずに同じようなボタンを作るにはどうしたらいいのでしょうか? <!doctype html> <html> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $("div").click(function(){ var x = this.id; alert(x); }); }); </script> </head> <body> <div id="aaa" class="div_link">a</div> <div id="bbb" class="div_link">b</div> <div id="ccc" class="div_link">c</div> <div id="ddd" class="div_link">d</div> <div id="eee" class="div_link">e</div> </body> </html>

このQ&Aのポイント
  • PCで作成した文字データーを印刷しようとした際、一部の文字データーが消えてしまいました。
  • 問題が発生した原因としては、作成した文字データーの印刷レビューで、一部のデータが見えなくなる不具合が発生している可能性が考えられます。
  • 解決方法としては、まずは印刷する際に文字データーが消えてしまう箇所があるか確認し、もし見つかれば再度データを作成して印刷を試してみることがおすすめです。
回答を見る

専門家に質問してみよう