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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

Q&A

解決済

2回答

1668閲覧

aタグのidをクリック時に取得したい.

Malo

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

1グッド

1クリップ

投稿2019/12/30 08:07

大学の課題で簡素なウェブページの作成を行っているのですが,aタグに関する動作が上手くいきません.

具体的には,aタグをクリックした時に,そのaタグのidを取得してJavaScriptで扱いたいのですが...

全体的な動作の流れとしては,
SubjectList.htmlからSubjectListCtrl.jsを呼び出す

SubjectListCtrl.jsからStudent.php, Subject.phpを呼び出す

Studentphp, Subject.phpからデータを返す.

SubjectListCtrl.jsでSubjectList.htmlに<a>を追加していく.

科目一覧表示

というのが今出来ている流れで,ここから,この時に作成したaタグのidを,クリックした時にJavaScript内で扱えるように取得したいのです.

以下がソースコードになります.
・SubjectList.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 8 <!-- Bootstrap CSS --> 9 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> 10 11 <!-- Optional JavaScript --> 12 <!-- jQuery first, then popper.js, then Bootstrap JS --> 13 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 14 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 15 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> 16 17 <!-- Original JavaScript --> 18 <script src="../js/SubjectListCtrl.js"></script> 19 <script src="../js/ShowReviewCtrl.js"></script> 20 <script src="../js/EditReviewCtrl.js"></script> 21 22 <script> 23 /** 24 * ページの再読み込み 25 */ 26 function reload() { 27 window.location.reload(); 28 } 29 </script> 30 31 <title>履修登録</title> 32 </head> 33 <body> 34 <h1>履修科目一覧</h1> 35 36 <div class="container"> 37 <ul id="subjects"></ul> 38 39 <!-- 再読み込みボタン --> 40 <input id="relaod_button" type="button" value="再読み込み" onclick="reload();"/> 41 </div> 42 43 <!-- 科目一覧を表示 --> 44 <script> 45 $(function() { 46 var slc = new SubjectListCtrl(); 47 slc.showList(); 48 }); 49 50 $(function() { 51 $('.subject').on('click', 52 function(e) { 53 e.preventDefault(); 54 e.stopPropagation(); 55 var id = $(this).attr('id'); 56 alert(id); 57 } 58 ); 59 }); 60 </script> 61 </body> 62</html>

・SubjectListCtrl.js

JavaScript

1/** 2 * 履修科目一覧を表示するコントロールクラス 3 * 4 * @method {void} showList 5 * @method {void} show 6 * @method {void} new 7 */ 8function SubjectListCtrl() {} 9 10/** 11 * 科目一覧を表示 12 * 13 * @return void 14 */ 15SubjectListCtrl.prototype.showList = function() { 16 $.getJSON('../php/Student.php', { method: 'subjects'}, 17 function(json) { 18 for(var id of json) { 19 $.getJSON('../php/Subject.php', { method: 'getTitle', id: id}, 20 function(subject) { 21 $('#subjects').append('<li><a class="subject" id="sub_'+subject['id']+'" href="#" click>'+subject['title']+'</a></li>'); 22 } 23 ); 24 } 25 } 26 ); 27} 28 29/** 30 * レビューを表示 31 * 32 * @param {int} id 科目ID 33 * @return void 34 */ 35SubjectListCtrl.prototype.show = function(id) { 36 37} 38 39/** 40 * レビューを投稿 41 * 42 * @param {int} id 科目ID 43 * @return void 44 */ 45SubjectListCtrl.prototype.new = function(id) {}

・Studnet.php

PHP

1<?php 2header('content-type: application/json; charset=utf-8'); 3ini_set('display_errors',1); 4 5/** 6 * 学生のエンティティクラス 7 * 8 * @property int $sutudentNo 学生番号 9 * @method int[] $subjects() 10 * @method string getReview() 11 * @method void setReview() 12 */ 13class Student { 14 private $studentNo = 0; 15 16 /** 17 * 履修している科目のidリストを返す 18 * 19 * @return int[] 履修している科目のidリスト 20 */ 21 public function subjects() { 22 $idArray = [0,1,2,3,4,5,6,7,8,9]; 23 return $idArray; 24 } 25 26 /** 27 * 指定された科目のレビューを取得する 28 * 29 * @param int $id 対象の科目id 30 * @return string 対象の科目のレビュー 31 */ 32 public function getReview($id) { 33 return; 34 } 35 36 /** 37 * 指定された科目のレビューを登録する 38 * 39 * @param int $id 対象の科目id 40 * @param string $text 登録するレビュー文 41 * @return void 42 */ 43 public function setReview($d, $text) { 44 return; 45 } 46} 47 48$st = new Student(); 49 50if($_GET['method'] === 'subjects') { 51 echo json_encode($st->subjects()); 52} 53else { 54 echo json_encode(array('error'=>"unknown_method")); 55} 56exit();

・Subject.php

PHP

1<?php 2/** 3 * 科目のエンティティクラス 4 * 5 * @property int $id 科目ID 6 * @property string $title 科目名 7 * @method string getTitle() 8 */ 9class Subject { 10 private $id; 11 private $title; 12 13 /** 14 * コンストラクタ 15 * 16 * @param int $id 科目ID 17 * @param string $title 科目名 18 */ 19 function __construct($id, $title) { 20 $this->id = $id; 21 $this->title = $title; 22 } 23 24 /** 25 * 科目のタイトルを取得する 26 * 27 * @param int $id 科目ID 28 * @return string 科目名 29 */ 30 public function getTitle($id) { 31 if ($this->id == $id) { 32 return $this->title; 33 } 34 return 0; 35 } 36} 37 38$sb = [ 39 new Subject(0, 'AAA'), 40 new Subject(1, 'BBB'), 41 new Subject(2, 'CCC'), 42 new Subject(3, 'DDD'), 43 new Subject(4, 'EEE'), 44 new Subject(5, 'FFF'), 45 new Subject(6, 'GGG'), 46 new Subject(7, 'HHH'), 47 new Subject(8, 'III'), 48 new Subject(9, 'JJJ'), 49]; 50 51if($_GET['method'] === 'getTitle') { // sd_1 52 $id = $_GET['id']; 53 $subject = [ 54 "title" => $sb[$id]->getTitle($id), 55 "id" => $id 56 ]; 57 echo json_encode($subject); 58}

初心者ゆえ説明が拙く,必要な情報が欠けている事もあると思いますので,追記するべき情報がありましたらご指摘頂けると幸いです.
ご助言をよろしくお願いします.

DrqYuto👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

非同期処理後に要素が増えるので、書き方を返る必要があります。

js

1$('#subjects').on('click', '.subject', function(e) { 2 e.preventDefault(); 3 e.stopPropagation(); 4 var id = $(this).attr('id'); 5 alert(id); 6});

投稿2019/12/30 09:20

kei344

総合スコア69364

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

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

Malo

2019/12/30 09:29

ご回答ありがとうございました. 状態が改善できましたので,BAとさせていただきました. 本当に助かりました!
guest

0

HTML

1 $(function() { 2 $('.subject').on('click',

の部分ですが,正しくは

HTML

1 $(function() { 2 $('#subject').on('click',

だと思います。class名のときは「.」を使い,id名のときは「#」を使います。

投稿2019/12/30 09:08

k-810

総合スコア192

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

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

Malo

2019/12/30 09:30

ご回答ありがとうございました. 子要素はちゃんと親から指定していかないといけないのですね... ありがとうございました.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問