• ジャイアンツ　VS　タイガース

  空席状況を確認 | Check availability

• ヤクルト　VS　ドラゴンズ

  空席状況を確認 | Check availability

• ベイスターズ　VS　カープ

  空席状況を確認 | Check availability

HTML

<section>
<ul class="list">
<li class="game" id="gt">
<h2>ジャイアンツ　VS　タイガース</h2>
<p class="check">空席状況を確認 | Check availability</p>
</li>
<li class="game" id="yd">
<h2>ヤクルト　VS　ドラゴンズ</h2>
<p class="check">空席状況を確認 | Check availability</p>
</li>
<li class="game" id="bc">
<h2>ベイスターズ　VS　カープ</h2>
<p class="check">空席状況を確認 | Check availability</p>
</li>
</ul>
</section>

CSS

.list {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
.list h2 {
margin: 0 0 2em 0;
font-size: 16px;
text-align: center;
}
.game {
float: left;
margin: 10px 10px 10px 0;
border: 1px solid #23628f;
padding: 4px;
width:40%;
}
.check {
margin: 0;
padding: 8px;
font-size: 12px;
color:#ffffff ;
background-color: #23628f;
text-align: center;
cursor: pointer;
}
.red {
background-color: red;
}
.green {
background-color: green;
}

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({url:'data.json',dataType:'json'})
.done(function(data){
$(data).each(function(){
if(this.crowded === 'yes'){
var idName = '#' + this.id;
$(idName).find('.check').addClass('crowded');
}
})
})
.fail(function(){
window.alert('読み込みエラー | Read error')
});
// クリックされたら空き状況を表示
$('.check').on('click',function(){
if($(this).hasClass('crowded')){
$(this).text('残席わずか | Only a few left').addClass('red');
}else {
$(this).text('お席あります | There are seats').addClass('green')
}
});
});
</script>

data.json

[
{"id":"gt","crowded":"yes"},
{"id":"yd","crowded":"no"},
{"id":"bc","crowded":"no"}
]

解説

Ajaxでのデータファイルの読み込みにおいて、ブラウザによってはローカル環境で動作しない場合があります。私もGoogle Chromeを使いましたがうまくいきませんでした。そんな時は作成したデータをwebサーバーにアップロードして確認してみてください。私もアップロードしたらうまくいきました。| When reading a data file with Ajax, it may not work in the local environment depending on the browser. I also used Google Chrome but it didn't work. In such a case, please upload the created data to the web server and check it. I uploaded it and it worked.

Ajaxの基本の形 | Basic form of Ajax

$.ajax({url: 'data.json, dataType: 'json'})
.done(function(data){
データがダウンロードできたときの処理
})
.fail(function(){
データがダウンロードできなかったときの処理
});

「$.ajax({url: 'data.json, dataType: 'json'})」→ urlにはダウンロードしたいデータのURLを指定します。今回のサンプルでは「data.json」としています。dataTypeプロパティにはダウンロードするデータの形式を指定します。今回はjson形式なので'json'としてます。| For url, specify the URL of the data you want to download. In this sample, it is "data.json". The dataType property specifies the format of the data to download. This time it's in json format, so it's called'json'.

「.done(function(data){～」 → このファンクションには、パラメータとしてダウンロードされたデータが渡されるので、これを「data」に代入しています。| Since the downloaded data is passed to this function as a parameter, this is assigned to "data".

「$(data).each(function(){ → eachメソッドは$()で取得したHTML要素や配列の項目１つひとつに対して()内のファンクションをくり返し実行します。| Each method repeatedly executes the function in () for each HTML element or array item acquired by $ ().

「 if(this.crowded === 'yes'){ 」 →　thisはJsonファイルでの配列の項目を示しています。crowdedプロパティの値がyesのとき｛～｝の処理が実行されます。| this shows the array items in the Json file. When the value of the crowded property is yes, the processing of {~} is executed.

「 var idName = '#' + this.id;」 → 変数idNameを定義して、そこに「#」とidプロパティの値を文字連結したものを代入します。たとえば最初の繰り返しなら、 {"id":"gt","crowded":"yes"},なので変数idNameには「#gt」という文字列が代入されます。| Define the variable idName and substitute the character concatenation of "#" and the value of the id property. For example, in the first iteration, {"id": "gt", "crowded": "yes"}, so the variable idName is assigned the string "#gt".

「 $(idName).find('.check').addClass('crowded');」 → findメソッドは$()で取得した要素に含まれる子孫要素のうち、()内のセレクタに当てはまる要素を取得します。(.check)の要素を取得して、クラス「crowded」を追加してます。ということで、 $(idName)は最初ならば「 <li class="game" id="gt">」でのgtを取得します。そして.find('.check')では「 <p class="check">空席状況を確認</p>」にて'.check'になっているので取得されています。.addClass('crowded')では「 <p class="check crowded">空席状況を確認</p>」とクラスを追加することになります。| The find method retrieves the descendant elements contained in the element retrieved by $ () that apply to the selector in (). Get the (.check) element and add the class "crowded". So, $ (idName) gets gt with "<p class =" game "id =" gt ">" at the beginning. And in .find ('.check'), it is acquired because it is'.check' in "<p class =" check "> Check availability </ p>". In .addClass ('crowded'), the class will be added as "<p class =" check crowded "> Check availability> </ p>".

クリックされたときのボタンの色を変化させる処理 | Processing to change the color of the button when clicked

「<p class="check">空席状況を確認</p>」がクリックされたときの処理については、「$('.check').on('click',function(){～」が示してます。

「 if($(this).hasClass('crowded')){～」 → この<p>のclassに「crowded」が含まれていたらということを示しています。| Indicates that this

class should contain "crowded".

「 $(this).text('残席わずか').addClass('red');」 → テキストを「残席わずか」と変更し、また.addClass('red')としておりCSSでの「.red {background-color: red; }」にて赤色に変更してます。| Changed the text to "only a few seats left" and changed it to .addClass ('red') and changed it to ".red {background-color: red;" in CSS. } ”Is changed to red.

もっと深く学びたい人にはこちらもどうぞ。| For those who want to learn more deeply, this is also recommended.

ぺージの先頭に戻る(Return to top of page)

プライバシーポリシー