Q&A
前に言った気がするけど h1 タグはタイトルと同じレベルなので 複数書くのはいかがなものかと。
h1の次にh4がきてるのも google的にマイナス配点
題名の通りですが非常に苦戦しております。作成しているのはホテルの予約サイトで,現段階では閲覧までです。
★実現したい機能★
既に画面に表示されているホテルの内容をAjaxとJqueryを使用し変更する(ページ読込みなし)
値段が高い順で表示されているのを低い順でクリックでソート
★問題★
この時どのようにHTML内に上手く値を入れるかわかりません。全てをemptyにして入れるのでしょうか。しかしemptyにすると複数作成することができませんし、クローンにするとHTMLが変更になるたびに変更しなければならないきがします。ヒントだけでもお願いします。
サンプルコードを用意しました。
HTML
1<html lang="en" dir="ltr"> 2<head> 3 <meta charset="utf-8"> 4 <title>Sample</title> 5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 6 <style media="screen"> 7 #push { 8 background-color: lightblue; 9 color: #fff; 10 cursor: pointer; 11 } 12 13 .hotel { 14 border: solid 1px #808080; 15 margin-bottom: 10px; 16 } 17 </style> 18</head> 19<body> 20 <h1>これはJSのサンプルです</h1> 21 <span id="push">ここを押してください</span> 22 <h4>ホテルが表示されます</h4> 23 <div class="hotels"> 24 <div class="hotel"> 25 <h1 class="name">デフォルトホテル1</h1> 26 <p class="price">デフォルトプライス300</p> 27 <p class="img">デフォルト画像</p> 28 <div class="tags"> 29 <span class="tag">デフォルトタグ</span> 30 </div> 31 </div> 32 <div class="hotel"> 33 <h1 class="name">デフォルトホテル2</h1> 34 <p class="price">デフォルトプライス200</p> 35 <p class="img">デフォルト画像</p> 36 <div class="tags"> 37 <span class="tag">デフォルトタグ</span> 38 </div> 39 </div> 40 <div class="hotel"> 41 <h1 class="name">デフォルトホテル3</h1> 42 <p class="price">デフォルトプライス100</p> 43 <p class="img">デフォルト画像</p> 44 <div class="tags"> 45 <span class="tag">デフォルトタグ</span> 46 </div> 47 </div> 48 </div> 49</body> 50<script> 51 $(function() { 52 $('#push').on('click', function() { 53 // ajax処理 54 $.post('sampleAjax.php', { 55 //データは何も送らない 56 }, function(reslut) { 57 //配列が返ってくる(動作確認済) 58 console.log(reslut); 59 }); 60 return false; 61 }); 62 }); 63</script> 64</html> 65
PHP
1<?php 2 3//以下の配列はDBから取得したものであると仮定する。 4 5//ホテルの基本情報(値段でソートした設定) 6$hotels = array( 7 array('hotel_id' => '1', 'country_code'=>'PHL', 'hotel_name'=>'SARROSAホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'30'), 8 array('hotel_id' => '2', 'country_code'=>'PHL', 'hotel_name'=>'SPAホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'40'), 9 array('hotel_id' => '3', 'country_code'=>'PHL', 'hotel_name'=>'MATTHERホテル', 'hotel_address'=>'セブ シティ, セブ', 'hotel_tel'=>'12345', 'price'=>'50') 10); 11//$hotelsに含まれているそれぞれのホテルの画像(DBの設定によりホテルの数と必ず一致する。今回はホテルが3つなのでこちらも同じ) 12$pics = array( 13 array('hotel_id' => '1', 'country_code'=>'PHL', 'pic'=>'hotel_idが1の画像です'), 14 array('hotel_id' => '2', 'country_code'=>'PHL', 'pic'=>'hotel_idが2の画像です'), 15 array('hotel_id' => '3', 'country_code'=>'PHL', 'pic'=>'hotel_idが3の画像です'), 16); 17//ホテル側が自由に複数持つことができるタグ。 18$tags = array( 19 array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'), 20 array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'後日支払い可'), 21 array('hotel_id' => '1', 'country_code'=>'PHL', 'tag'=>'宿泊施設へ直接支払い'), 22 array('hotel_id' => '2', 'country_code'=>'PHL', 'tag'=>'キャンセル無料'), 23 array('hotel_id' => '2', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'), 24 array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'無料Wi-Fi'), 25 array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'後日支払い可'), 26 array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'宿泊施設へ直接支払い'), 27 array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'朝食付き'), 28 array('hotel_id' => '3', 'country_code'=>'PHL', 'tag'=>'キャンセル無料'), 29); 30/* 31表示に関して 32HTML .hotel .nameクラスは $hotelsのhotel_name 33HTML .hotel .priceクラスは $hotelsのhotel_price 34HTML .hotel .imgクラスは $$picsのpic 35HTML .tags .tagクラスは $tagsのtag 36*/ 37$allOfHotelsInfo = array($hotels,$pics,$tags); 38 39if ($_SERVER['REQUEST_METHOD'] === 'POST') { 40 header('Content-Type: application/json'); 41 echo json_encode($allOfHotelsInfo); 42 exit; 43} 44
完成画像イメージ
回答1件
0
ベストアンサー
ざっくりと説明すると、
phpによって出力されたhtmlなのだから、
htmlのDOM操作になるので、
phpでで出力制御されるhtmlにおいて
タグにclassだのidだのをもたせて、
jsとかjQueryとかから操作します。
Selectors - jQuery 日本語リファレンス
こういうのを駆使できるようにidとかclassとか持たせたhtmlを出力します。
投稿2019/02/11 11:40
編集2019/02/11 11:46退会済みユーザー
総合スコア0
ありがとうございます。それは考えておりました。
しかし、仮に今回のサンプルコードの.hotelのクラスにidが入っていたとしても、並び替えのためどのようにした操作するかわかりません。簡単なサンプルコードをお示しいただけませんか。
js（jQuery）上で並べ替えをするためには、
js上に並べ替えに必要なデータを持たせるのが王道かもしれません。
phpによる出力ではjsに引き渡す、div class=hotelのブロックを構成する必要なデータを
jsonにまとめて持たせつつ、
並べ替えの際には一旦div class=hotelsの内側htmlを除去して
json上のデータを頼りにjQueryからhtmlをdiv class=hotelsの内側に出力するような感じです。
Manipulation - jQuery 日本語リファレンス http://semooh.jp/jquery/api/manipulation/
empty()でカラにして、
append()で内側に足していく、もしくは
replaceWith()が使えれば一発で挿げ替えできるはず。
（jQuery習得中なので、自信なし。）
ありがとうございます。
中々私には難しそうなので、jaxを使用しページ遷移を行うことにします。
あなたの回答
tips
プレビュー
