JavaScript内の文字連結方法【jQueryを使用】

このQ&Aのポイント
  • JavaScript内で文字を連結する方法について紹介します。jQueryを使用して、要素のid属性の値を取得し、文字列と連結することができます。
  • 具体的には、$(this).attr("id"); でidの値を取得し、それを文字列と連結することで目的の結果を得ることができます。
  • 例えば、idが「004」だとすると、「flashvars:'programId=004&dispMode=outer'」という形で文字列を連結することができます。
回答を見る
  • ベストアンサー

JavaScript内の文字を連結したい

jQueryを使っています。 「$(this).attr("id");」でidの値を取得し、それを下記の「あああああ」部分に展開して連結をさせたいですが、どうやったらいいかわかりません。 $(function(){  $("a").click(function() {   var flashvars = {};   var params = {    scale:'noScale',    salign:'lt',    menu:'false',    allowfullscreen:'true',    flashvars:'programId=あああああ&dispMode=outer'   };  }); }); idが「004」だとするなら 「flashvars:'programId=004&dispMode=outer'」と連結したいです。 よろしくお願いします。

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

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

idが「004」だとするなら =>id属性は数字からはじめてはだめです。 それはさておき、「あああああ」に意味はないのでしょうから 単に文字列連結 flashvars:'programId=' + $(this).get(0).id + '&dispMode=outer' でいいんじゃないかと、

Java-Java
質問者

お礼

ありがとうございます。動きました! >id属性は数字からはじめてはだめです。 そうですね。ありがとうございます。

その他の回答 (1)

  • osamuy
  • ベストアンサー率42% (1231/2878)
回答No.1

置換: params.flashvars = params.flashvars.replace( 'あああああ', '004' );

Java-Java
質問者

お礼

ありがとうございます!参考にさせてもらいました。

関連するQ&A

  • swfobjectのwmodeを再生中に変更

    swfobject2.2を使ってフラッシュムービーをホームページに埋め込んでいます。 <script type="text/javascript"> var swfVersionStr = "10.1.0"; var xiSwfUrlStr = "expressInstall.swf";//インストールを勧めるswf var flashvars = {}; var params = {}; params.quality = "high"; params.bgcolor = "#ffffff"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; params.wmode = "direct"; var attributes = {}; attributes.id = "xxxxx"; attributes.name = "xxxxx"; attributes.align = "middle"; attributes.wmode = "direct"; swfobject.embedSWF("xxxxx.swf", "flashContent", "480", "320", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); </script> wmode = "direct"の部分ですが、ムービーの再生中にwmode = "transparent"に 変更できるでしょうか? javascriptでどうすればいいのかお願いします。

  • JavaScriptで作ったメニューの開閉

    こんにちは、超初心者です。 クリックで開閉するサイドメニューを作ろうと思い 下記のような内容を使ってみました。 var j$ = jQuery; j$(function(){ $("#acc").css(), j$(".acc").each(function(){ j$("li > a", this).each(function(index){ var $this = j$(this); if(index > 0) $this.next().hide(); $this.click(function(){ var params = {height:"toggle", opacity:"toggle"}; j$(this).next().animate(params).parent().siblings() .children("ul:visible").animate(params); return false; }); }); }); }); クリックで開閉するのはうまくいくのですが、 初期表示でメニューが開いたままなんです。 閉じられてるメニューをクリックすると 開くという動きにしたいんです。 しかも、いま作ったものをあまり崩さずに使えると 大変ありがたいです… よろしくお願いします。

  • jQueryでの記述をjavascriptに

    下記のjQueryの記述をライブラリ無しのjavascriptでの記述にしていただきたいです。 imgタグのsrc属性とaタグのhref属性を相対パスから絶対パスに動的に変換させる必要があるのですが、ある事情でjQueryを使えないとの事で困っています。 どうかよろしくお願い致します。 <script type="text/javascript"> $(function(){ $('#hoge').children('img:not([src^=http])').each(function (){ var imgSrc = $(this).attr('src'); $(this).attr('src','http://xxxxxxxxxxxx' + imgSrc); }); $('#hoge').children('a[href^=○○○]').each(function (){ var aHref = $(this).attr('href'); $(this).attr('href','http://xxxxxxxxxxxx' + aHref); }); }); </script>

  • 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>

  • JW Playerのfileに、引数を代入したい。

    JW Playerのfileに、引数を代入したい。 http://okwave.jp/qa/q6194327.html と質問内容は同じです。 VURLと指定しても代入が行われず、ただのVURLと認識されてしまいます…。 お力添えをお願いします。 <script type="text/javascript"> var VURL = window.location.search; VURL = VURL.replace(/^\?/, ""); //alert(VURL); var flashvars = { 'file': 'VURL', 'image': 'logo.jpg', 'id': 'playerID', 'controlbar': 'over', 'type': 'video' }; var params = { 'allowfullscreen': 'true', 'allowscriptaccess': 'always', 'wmode': 'opaque' }; var attributes = { 'align': 'top', 'name': 'playerID', 'id': 'playerID' }; swfobject.embedSWF('main.swf', 'playerID', '800', '600', '9.0.124', 'expressInstall.swf', flashvars, params, attributes); </script>

  • [javascript]「*=」の意味

    お世話になります。 js初心者ですが、質問させてください。 現在jsを学んでおり、ネットで手ごろなコードを探し読んでいます。 下記のコードは画像にカーソルをのせたとき、画像を差し替えるというものですが、 「*=」の意味が分かりません。 ★★★★★★★★★★★★★★★★★★★ jQuery(function($) { var postfix = '_on'; $('#nav_global a img').not('[src*="'+ postfix +'."]').each(function() { var img = $(this); var src = img.attr('src'); var src_on = src.substr(0, src.lastIndexOf('.')) + postfix + src.substring(src.lastIndexOf('.')); $('<img>').attr('src', src_on); img.hover(function() { img.attr('src', src_on); }, function() { img.attr('src', src); }); }); }); ★★★★★★★★★★★★★★★★★★★ 「*=」の意味は例えば、 a*=b と a=a*b は同義で、 「aかけるbをaに代入」 というような解釈でいます。 この考え方だと、上記コード3行目 [src*="'+ postfix +'."] の意味がよくわかりません。 srcと"'+ postfix +'."をかけてsrcに代入? そんなこと出来るのでしょうか。 よろしければご回答いただければと思います。 よろしくお願いします。

  • 2つのjavascriptを組み合わせたい

    フォームメール用の2つのjavascriptがあります。 ●2重送信防止とデータ送信後指定ページへ遷移するjavascript ●テキストボックスが空欄だった時にアラートを表示するjavascript の2つです。 この2つを組み合わせようとしたのですが、うまく動きません。 ご指導いただきたくお願いいたします。 *************************************************** 【●2重送信防止とデータ送信後指定ページへ遷移するjavascript】【動きます】 送信ボタン押下後、2重送信を防止しながら、データ送信後は「location.href = "finish.html"」でfinish.htmlを表示します。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTML送信キャンセル event.preventDefault(); //フォーム要素取得 var $form = $(this); // 送信ボタンを取得 // (後で使う: 二重送信防止) var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, // 送信前 beforeSend: function(xhr, settings) { // ボタン無効二重送信防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタン有効再送信許可 $button.attr('disabled', false); }, // 通信成功処理 success: function(result, textStatus, xhr) { // 入力値初期化 $form[0].reset(); location.href = "finish.html"; }, // 通信失敗処理 error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信A"> </form> *************************************************** 【●テキストボックスが空欄だった時にアラートを表示するjavascript】【動きます】 テキストボックスが空欄だったらアラートを表示します。 <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form> *************************************************** 【上記の2つを組み合わせてみました。】【動きません】 テキストボックスが空欄だったらアラートを表示しながら2重ボタン排除&finish.htmlに遷移というものです。 【結果】 「問題なく動くjavascript」2つを単純に組み合わせただけなのですが、 finish.htmlに遷移せずinsert.phpが表示されます。ご指導宜しくお願いします。 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { event.preventDefault(); var $form = $(this); var $button = $form.find('button'); $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', timeout: 10000, beforeSend: function(xhr, settings) { $button.attr('disabled', true); }, complete: function(xhr, textStatus) { $button.attr('disabled', false); }, success: function(result, textStatus, xhr) { $form[0].reset(); location.href = "finish.html"; }, error: function(xhr, textStatus, error) { alert('retry');} }); }); }); </script> <script> function check3() {   var tel3 = document.form1.tel.value;   var fax3 = document.form1.fax.value;   var isValid = true;   if (!tel3) {     alert("電話未入力");     isValid = false;   }   if (!fax3) {     alert("FAX未入力");     isValid = false;   }   if (!isValid) {     return;   }   document.form1.submit(); } </script> <form name="form1" id="form1" method="POST" name="form1" action="insert.php"> <input type="text" name="tel" value="" /> <input type="text" name="fax" value="" /> <input type="submit" value="送信B" onclick="check3();"> </form>

  • jQueryで文字数カウンタ(複数対応)

    jQueryのプラグインを作成中です。 指定したテキストフォーム、テキストエリア内の文字数をカウントして、 指定場所に文字数を表示させるというものです。 下記のように記述し、 (function(jQuery) { jQuery.fn.textCount = function(options) { //キーボードが押された時にカウント jQuery(this).live("change keyup",function(){ var count = jQuery(this).val().length; var disp_area = jQuery(this).attr("id"); jQuery("."+disp_area).html(count+"文字"); }); return this; }; })(jQuery); jQuery(".counter").txtCount(); とHTML内で宣言しました。 <textarea id="sample">ここの文字数が</textarea> <div class="sample">ここに表示</div> と、ここまではうまくいきました。 が、テキストエリアの数が複数個あり、数が変動するため、IDを配列にしたいと思っています。 そこで、 <textarea id="sample[1]">個々の文字が</textarea> <div class="sample[1]">ここに表示されない</div> のように記述しました。 すると文字数が表示されなくなってしまいました。 classやidに配列指定はできないのでしょうか。 また、この場合はどのように宣言するのが正しいのでしょうか。

  • safari、firefoxでjavascript

    はじめまして。 flashからjavascriptへ値を飛ばし、それを受け取ったHTML側でjavascriptを実行し、オブジェクトのステージサイズを変更するという物を作りました。 ところがIEでは正常に機能するのですが、safari、firefoxでは上手く機能しません、DOCTYPEを互換モードで宣言すれば機能するのですが、今度はIEで見たときにcssによるレイアウトが崩れてしまいます。 javascriptの書き換えが必要だと言うことは分かったのですが、知識に乏しく何をどう書き変えたらよいのか分りません。 ご教授の程お願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> <!-- function newSize(datoX,datoY) { if(document.all && !document.getElementById) { document.all['miFlash'].style.pixelWidth = datoX; document.all['miFlash'].style.pixelHeight = datoY; }else{ document.getElementById('miFlash').style.width = datoX; document.getElementById('miFlash').style.height = datoY; } } //--> </script> </head> <body> <div id="miFlash" style="position:relative; width:1px; height:1px; z-index:1"> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0','width','220','height','100%','align','','src','sidemenu','quality','high','scale','noscale','bgcolor','#FFFFFF','salign','LT','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','sidemenu' ); //end AC code </script> <noscript> <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="220" HEIGHT="100%" ALIGN=""> <PARAM NAME=movie VALUE="sidemenu.swf"> <PARAM NAME=salign VALUE="LT"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=noscale> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="sidemenu.swf" quality=high scale=noscale bgcolor=#FFFFFF WIDTH="220" HEIGHT="100%" SALIGN="LT" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT> </noscript> </div> </body> </html>

  • コールバック関数(?)をループしたいのですが………

    下記のようなコールバック関数(?)が10コ続いているとき、 for文か何かでループさせ分かりやすく書きたいのですが、どうすれば良いでしょうか? $('#id1').hoge(params, options, function(){  $('#id2').hoge(params, options, function(){   //処理  }); }); ※jQuery利用してます

専門家に質問してみよう