回答編集履歴
1
コメントに詳細な解説を追加。ベストアンサーほしい一審で笑
answer
CHANGED
|
@@ -7,17 +7,40 @@
|
|
|
7
7
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
|
|
8
8
|
|
|
9
9
|
<script>
|
|
10
|
-
$(function(){
|
|
10
|
+
$(function(){
|
|
11
|
+
|
|
12
|
+
//.areaInfoがクリックされたら
|
|
11
|
-
|
|
13
|
+
$('.areaInfo').click(function(){
|
|
14
|
+
|
|
15
|
+
//これはたぶんajaxでとりますか？
|
|
12
|
-
|
|
16
|
+
var json = {category:'中央区',id:1,address:'cuouku'};
|
|
17
|
+
|
|
18
|
+
//クリックされたdata-areaの値を変数areaに代入
|
|
19
|
+
//この後出てくるareaは'chuoku'という文字列になる
|
|
13
|
-
|
|
20
|
+
var area = $(this).attr('data-area');
|
|
21
|
+
|
|
22
|
+
//この場合だと#chuoukuの子要素のa.detail_linkのhrefに「detail.php?id=1」が入る
|
|
14
|
-
|
|
23
|
+
$('#' + area + ' a.detail_link').attr("href","detail.php?id=" + json["id"]);
|
|
24
|
+
|
|
25
|
+
//この場合だと#chuoukuの子要素のh4.categoryに「中央区」が入る
|
|
15
|
-
|
|
26
|
+
$('#' + area + ' h4.category').text(json["category"]);
|
|
27
|
+
|
|
28
|
+
//この場合だと#chuoukuの子要素のh4.categoryのhref属性の値に
|
|
29
|
+
//「https://www.google.co.jp/maps/search/cuouku」が入る
|
|
16
|
-
|
|
30
|
+
var gmapUrl = "https://www.google.co.jp/maps/search/" + json["address"];
|
|
31
|
+
$('#' + area + ' a.i_map').attr("href",gmapUrl);
|
|
32
|
+
|
|
33
|
+
//aタグのなかに「cuouku」が入る
|
|
17
|
-
|
|
34
|
+
$('#' + area + ' a.i_map').text(json["address"]);
|
|
35
|
+
|
|
36
|
+
//非表示のtrを表示させる。ただtrをtableだったか。。
|
|
37
|
+
//→とりあえず表示しますが、レイアウト上の問題があるかも
|
|
18
|
-
|
|
38
|
+
$('#' + area).css("display","table");
|
|
39
|
+
|
|
40
|
+
});//.areaInfoクリックで発生する処理終了
|
|
41
|
+
|
|
19
42
|
});
|
|
20
|
-
|
|
43
|
+
|
|
21
44
|
</script>
|
|
22
45
|
|
|
23
46
|
<a href='javascript:;' data-area="chuoku" class="areaInfo">中央区のデータを表示</a>
|