質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Perl

Perlは多目的に使用される実用性が高い動的プログラミング言語のひとつです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1686閲覧

ページ遷移はしないが、値を渡したい

Alice_W

総合スコア7

Perl

Perlは多目的に使用される実用性が高い動的プログラミング言語のひとつです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/01/18 07:16

編集2018/01/18 07:34

###やろうとしていること
・Youtubeの動画IDが[% y_data.video_id %]の関数に入ってくる(複数個)ので、「動画を再生」のリンクは複数個になるが、
どれを押しても1つの関数で各々の動画が再生される様にしたい。

###やりたいこと
・今はJS内にYoutubeの動画のIDを直接記述しているが(videoId:'xxxxxxxx',)、
aタグのdata-video-idの変数の中身がvideoId:''に入る様にしたい。

###やってみたこと
・aタグは使用していますがページ遷移はしないため、GETなどで値を渡すことは出来ませんでした。
・今はaタグのID名で要素を取得し、js内の変数に入れられないか調べているところです。

###環境情報
・サーバー側:おそらくperl
※HTML内に使われているのは、テンプレートツールキット(Perlのフレームワーク)だと思います。

###HTML

html

1<div id="modal-content"> 2 <div class="inner"> 3 <div id="player"></div> 4 </div> 5</div> 6 7[% IF youtube -%] 8 <div class="youtubeMovie"> 9[% WHILE (y_data = youtube.next) -%] 10 <a id="modal-open" class="button-link" href="#" data-video-id="[% y_data.video_id %]">動画を再生</a> 11[% END -%] 12 </div> 13[% END -%]

###JS

javascript

1<script> 2$(function(){ 3 'use scrict'; 4 5 //プレイヤー変数 6 var player; 7 8 //オブジェクト生成 9 function youtubeAPIInit() { 10 var scriptTag = document.createElement('script'); 11 scriptTag.src = "https://www.youtube.com/iframe_api"; 12 var fsTag = document.getElementsByTagName('script')[0]; 13 fsTag.parentNode.insertBefore(scriptTag, fsTag); 14 window.onYouTubeIframeAPIReady = function(){ 15 player = new YT.Player('player', { 16 height:'540', 17 width:'960', 18 videoId:'xxxxxxxx', 19 playerVars:{ 20 autohide:1, 21 controls:1, 22 modestbranding:1, 23 iv_load_policy:3, 24 showinfo:1, 25 rel:0, 26 autoplay:1 27 }, 28 events: { 29 'onReady' : onPlayerReady, 30 'onStateChange': onPlayerStateChange 31 } 32 }); 33 }; 34 } 35 36 function onPlayerReady(event){ 37 event.target.playVideoAt(); 38 } 39 40 // プレーヤーの状態が変更されたとき 41 function onPlayerStateChange(event) { 42 // 現在のプレーヤーの状態を取得 43 var ytStatus = event.data; 44 // 再生終了したとき 45 if (ytStatus == YT.PlayerState.ENDED) { 46 $content.add($lay).fadeOut("fast",function(){ 47 $lay.remove(); 48 }); 49 } 50 } 51 52 //モーダル 53 var modal = {}, $lay, $content; 54 modal.inner = function() { 55 if($("#modal-overlay")[0]) return false; 56 $("body").append('<div id="modal-overlay"></div>'); 57 $lay = $("#modal-overlay"); 58 $content = $("#modal-content"); 59 $lay.fadeIn("slow"); 60 youtubeAPIInit(); 61 this.resize(); 62 $content.fadeIn("fast"); 63 $lay.unbind().click(function() { 64 player.stopVideo(); 65 $content.add($lay).fadeOut("fast",function(){ 66 $lay.remove(); 67 }); 68 }); 69 }; 70 71 //リサイズ処理 72 modal.resize = function(){ 73 var $winWidth = $(window).width(); 74 var $winHeight = $(window).height(); 75 var $contentOuterWidth = $("#modal-content").outerWidth(); 76 var $contentOuterHeight = $("#modal-content").outerHeight(); 77 $("#modal-content").css({ 78 "left": (($winWidth - $contentOuterWidth) / 2) + "px", 79 "top": (($winHeight - $contentOuterHeight) / 2) + "px" 80 }); 81 } 82 83 //クリック処理 84 $("#modal-open").click(function(){ 85 modal.inner(); 86 modal.resize(); 87 }); 88 $(window).resize(modal.resize); 89}); 90</script>

###追記
js初心者のため、これだけが調べてもなかなかやり方が分かりませんでした。
初歩的なことかもしてませんが、ご教示頂ければと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/01/18 07:19

プログラムコード(およびエラーメッセージ)は```で囲ってください。(わからなければ質問編集画面でコード部分を選択し<code>ボタンを押してください)正しく反映されているかどうかは質問編集画面のプレビューを見ながら編集していってください。
Alice_W

2018/01/18 07:23

ご指摘頂きありがとう御座います。コード部分を囲んでみました。
m.ts10806

2018/01/18 07:25

[% IF youtube -%]のようにHTMLではみないような表記が見られます。サーバー側の言語や何かしらのフレームワークをお使いでしょうか?環境情報やタグに追記していただけると、より専門的な知識をもった回答者の目にとまりやすくなります。
Alice_W

2018/01/18 07:36

書き方がこれで合っているか分からないのですが、環境情報とタグに追記してみました。おそらくテンプレートツールキットというPerlのフレームワークを使っているみたいなのですが、タグの欄には出てこなかったため、環境情報内に記載させて頂きました。
guest

回答1

0

ベストアンサー

サーバーサイドのプログラムがなにかわかりませんが

[% WHILE (y_data = youtube.next) -%] <a id="modal-open" class="button-link" href="#" data-video-id="[% y_data.video_id %]">動画を再生</a> [% END -%]

これはおかしいと思います。a#modal-openが複数現れると思います。
idの重複は絶対に禁止です。

jqueryが使えるようなのでクラスで引っ掛けてattrでdata-video-idを取ればいいんじゃないですかね。

javascript

1$("a.button-link").click(function(){ 2 alert($(this).attr('data-video-id')); 3});

投稿2018/01/18 07:40

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Alice_W

2018/01/18 09:58

こちらのattrで取る方法で、無事idを取ることが出来ました。 ご指摘頂いたとおり、確かにidが重複してしまうのはおかしいですね。 質問した点以外にも気づきを与えて下さって、感謝です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問