この記述のjsをもっと簡潔にしたいです。
解決済
回答 9
投稿
- 評価
- クリップ 8
- VIEW 2,392
appendにある記述を簡潔にしたいです。
理想例:
area = ("<tr><th><span>" + json["category"] + "</span><a href='detail.php?id=" + json["id"] + "'><h4>" + json["title"] + "</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/" + json["address"] + "'>" + json["address"] + "</a></span></td><td><span class='txt'>" + json["tel"] + "</span></td><td><span class='txt'>" + json["business_hours"] + "</span></td><td><span class='txt'>" + json["holiday"] + "</span></td></tr>");
$(".tokyo-chuoku").append(area);
$(".tokyo-shibuyaku").append(area);
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+6
var json1={
category:'カテゴリ名',
id:'IDxxxx',
title:'タイトル',
address:'中央区XX町XXXX',
tel:'XX-XXXX-XXXX',
business_hours:'X:XX-X:XX',
holiday:'休日'
}
var json2={
category:'カテゴリ名',
id:'IDxxxx',
title:'タイトル',
address:'渋谷区XX町XXXX',
tel:'XX-XXXX-XXXX',
business_hours:'X:XX-X:XX',
holiday:'休日'
}
area = "<tr><th><span>{{category}}</span><a href='detail.php?id={{id}}'><h4>{{title}}</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span></td><td><span class='txt'>{{tel}}</span></td><td><span class='txt'>{{business_hours}}</span></td><td><span class='txt'>{{holiday}}</span></td></tr>";
function placeHolder(str, json){
for ( var k in json ){
str = str.replace('{{'+k+'}}',json[k]);
};
return str
}
$(".tokyo-chuoku").append(placeHolder(area,json1));
$(".tokyo-shibuyaku").append(placeHolder(area,json2));
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+6
Handlebars.jsを使うと見やすく書けます。
…このままだと動かないかもですが…;
<script id="tmp01" type="text/x-handlebars-template">
<tr>
<th>
<span>{{category}}</span>
<a href='detail.php?id={{id}}'><h4>{{title}}</h4></a>
</th>
<td>
<span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span>
</td>
<td><span class='txt'>{{tel}}</span></td>
<td><span class='txt'>{{business_hours}}</span></td>
<td><span class='txt'>{{holiday}}</span></td>
</tr>
</script>
var template = Handlebars.compile($("#tmp01").html());
$("#tokyo-chuoku").append(template(json));
$(".tokyo-shibuyaku").append(area);
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+3
ヘルパーメソッドは他の画面でも流用できますし。
// trタグ生成 ※他のタグのメソッドは割愛します
var tr = function (attr, value) {
return '<tr' + attr + '>' + value + '</tr>';
}
area = tr ('',
th ('',
span ('', json['category']),
a (" href=detail.php?id="+json['id'], h4 (json['title']) )
),
td ('',
span (" class='gmap_link'",
a (" class='i_map target='_blank'" +
"href='https://www.google.co.jp/maps/search/'" + json['address'],
json['address']
)
)
),
td ('', span (" class='txt'", json['tel']) ),
td ('', span (" class='txt'", json['business_hours']) ),
td ('', span (" class='txt'", json['holiday']) )
);
$(".tokyo-chuoku").append(area);
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
var htmlString = '';
var json = {
id: 'id',
title: 'title',
category: 'category',
address: 'address',
tel: 'tel',
business_hours: 'business_hours',
holiday: 'holiday'
}
htmlString = htmlString.concat(
'<tr>',
'<th>',
'<span>' + json['category'] + '</span>',
'<a href="detail.php?id=' + json['id'] + '"',
'<h4>' + json['title'] + '</h4>',
'</th>',
'<td>',
'<span class="gmap_link">',
'<a class="i_map" target="_blank" href="https://www.google.co.jp/maps/search/' + json['address'] + '">',
json['address'],
'</a>',
'</span>',
'</td>',
'<td>',
'<span class="txt">',
json['tel'],
'</span>',
'</td>',
'<td>',
'<span class="txt">',
json['business_hours'],
'</span>',
'</td>',
'<td>',
'<span class="txt">',
json['holiday'],
'</span>',
'</td>',
'</tr>'
);
$(function () {
$element = $('.tokyo-chuoku');
$element.html(unescape(htmlString));
});
詳しくは知らないため「これ」とおすすめできるものはありませんが、jQuery 以外の、AngularJS などのフレームワークの導入を検討されてはいかがでしょうか
## Links
* 人気上昇中のJavaScriptライブラリを調べてみた[ジャンル別に比較] - Build Insider
* jquery inserted HTML is rendered as a raw text - Stack Overflow
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
たぶんセレクトボックスとかにチェックしたときに表示させるような仕様なのかなと推測してしたのように作ってみました。
※ちょっと長かったので多少データ省略させてもらいました。
appendを使うのはajaxで程よく整形されたhtmlを返す前提でないと仕様変更時にjavascriptの文字列結合と格闘する羽目になると思います。
apiなどからjsonで帰ってくるデータを使うとするとattrやtextで予め用意しておいた非表示のhtmlに値をうまく入れるほうが個人的にはすっきりします(あくまでも好みの問題かもしれませんが)
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(function(){
//.areaInfoがクリックされたら
$('.areaInfo').click(function(){
//これはたぶんajaxでとりますか?
var json = {category:'中央区',id:1,address:'cuouku'};
//クリックされたdata-areaの値を変数areaに代入
//この後出てくるareaは'chuoku'という文字列になる
var area = $(this).attr('data-area');
//この場合だと#chuoukuの子要素のa.detail_linkのhrefに「detail.php?id=1」が入る
$('#' + area + ' a.detail_link').attr("href","detail.php?id=" + json["id"]);
//この場合だと#chuoukuの子要素のh4.categoryに「中央区」が入る
$('#' + area + ' h4.category').text(json["category"]);
//この場合だと#chuoukuの子要素のh4.categoryのhref属性の値に
//「https://www.google.co.jp/maps/search/cuouku」が入る
var gmapUrl = "https://www.google.co.jp/maps/search/" + json["address"];
$('#' + area + ' a.i_map').attr("href",gmapUrl);
//aタグのなかに「cuouku」が入る
$('#' + area + ' a.i_map').text(json["address"]);
//非表示のtrを表示させる。ただtrをtableだったか。。
//→とりあえず表示しますが、レイアウト上の問題があるかも
$('#' + area).css("display","table");
});//.areaInfoクリックで発生する処理終了
});
</script>
<a href='javascript:;' data-area="chuoku" class="areaInfo">中央区のデータを表示</a>
<table>
<tr id='chuoku' style="display:none">
<th>
<span class="category">
<a href="" class="detail_link"><h4 class="category"></h4></a>
</span>
</th>
<td>
<span class='gmap_link'>
<a class="i_map" target="_blank" href=""></a>
</span>
</td>
</tr>
</table>
※ソースはデスクトップに保存すればそのまま動きますので挙動見ていただければ幸いです。投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
$(".tokyo-chuoku").append(createTrData(json));
var url = "https://www.google.co.jp/maps/search/";
function createTrData(json){
var ctd = function(value){
return $('<td />').append($('<span />').addClass('txt').text(value));
};
return $('<tr />')
.append($('<th />').append($('<span />').text(json["category"]))
.append($('<a />').attr('href',"detail.php?id=" + json["id"] )
.append($('<h4 />').text(json["title"]))))
.append($('<td />').append($('<span />').addClass('gmap_link').append($('<a />')
.addClass('i_map').attr('target','_blank').attr('href',url +json["address"])
.text(json["address"]))))
.append(ctd(json["tel"]))
.append(ctd(json["business_hours"]))
.append(ctd(json["holiday"]));
}
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
- テンプレートエンジンを使う
- 文字列を配列に入れて [].join();
- 表示上の変更される部分だけ更新する
このHTMLが絶対変更されないということでもない限り、テンプレートエンジンを使うべきだと思います。
そうでないならば、配列.join や 文字列.concat方法でいいんじゃないでしょうか。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
function area(json_arg) {
return "<span>" + json_arg["hoge"] + "</span>";
}
json = { "hoge" : "huga" };
$(".tokyo-chuoku").append(area(json));
$(".tokyo-shibuyaku").append(area(json));
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
var tr = "\
<tr>\
<th>\
<span>:category</span>\
<a href='detail.php?id=:id'>\
<h4>:title</h4>\
</a>\
</th>\
<td>\
<span class='gmap_link'>\
<a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/:address'>:address</a>\
</span>\
</td>\
<td><span class='txt'>:tel</span></td>\
<td><span class='txt'>:business_hours</span></td>\
<td><span class='txt'>:holiday</span></td>\
</tr>\
";
var labels = ["category", "id", "title", "address", "tel", "business_hours", "holiday" ];
for(var i in labels)
{
var label = labels[i];
var val = json[label];
tr = tr.replace(new RegExp(':' + label), val);
}
$(".tokyo-chuoku").append($(tr));
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。