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

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

ただいまの
回答率

88.20%

クリックした時に応答するボタンの指定方法について

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 739

ZZ-TOP

score 36

JavaScriptの勉強をしております。

ガイドブックの巻末にJqueryのコードがあり、
今回初めてをJqueryのコードを見ました。

以下のコードはガイドブックのサンプルコードで
ブラウザ上でのHTMLの表示は画像の通りです。

大体の動作はわかるのですが、
ボックス(の中の対応する文字列)をクリックしたときのコードの意味と
動作が理解できません。

わからない部分は2か所あり1つ目は以下のコードです。
$('.check').on('click', function() {

このコードではクリックした時のプロパティは
「('.check').on('click',)」だけです。

そのためクラスに「check」があるもの全て(=3つのボックス全て)
が対象になると思います。

要するに、クリックした時の対象が3つのボックス全てに
なってしまうので、「('.check').on('click',)」以外に
何かもう1つ属性の指定が必要になるように思います。

ですが、実際にはこのコードでクリックした時にテキストが
「残席わずか」とか「お席あります」に変更されたり

jsonから取得したプロパティによりテキストの背景色を
赤や緑に変更されてクリックしたボックスだけが正常に動作します。

なぜ、クリックした時に発動される属性に
$('.check').on('click', function() {」しかないのに、

クリックしたボックスだけを選んで
(※3個ある「class="check"」のある要素の中からクリックされたものだけを選んで)
イベントを発動させることが出来るのでしょうか?


わからない部分の2つ目は以下のコードです
if($(this).hasClass('crowded'))

この場合の「$(this)」は「クリックされた対象」
(=「$('.check')」の中でクリックされた要素)
と思って良いのでしょうか?

すいませんが詳しい方、説明の上手な方、
jquery(JavaScript)でイベントの対象となる要素が複数あった時に、
クリックされた要素を判定する方法について教えて下さい。

サンプルのコードは以下の通りです。
↓ Jquery(一部、JavaScript)

<!-- net上のjqueryへのアクセス~呼び出し -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){

//「data.json」へのアクセス~読み込み
$.ajax({url: 'data-A.json', dataType: 'json'})
.done(function(data){ 

//「data.json」読み込みが完了した時
$(data).each(function() {
if(this.crowded === 'yes') {
    var idName = '#' + this.id;
    $(idName).find('.check').addClass('crowded');
            }
        });
    })

//「data.json」読み込みが完了しなかった時
.fail(function(){
window.alert('読み込みエラー');
 });

//クリックされたら空き席状況を表示
$('.check').on('click', function() {

if($(this).hasClass('crowded')) {
$(this).text('残席わずか').addClass('red');
} else {
    $(this).text('お席あります').addClass('green');

        }
    });
});
</script>

外部ファイルの「data-A.json」は以下の通りです。

[
    {"id":"js","crowded":"yes"},
    {"id":"security","crowded":"no"},
    {"id":"uiux","crowded":"no"}
]


一応、HTML/CSSも貼っておきます。

<style>
.lisCl{}

.lisCl li{border: solid 1px;
float: left;
width: 15%;
margin: 20px;
list-style: none;
text-align: center;}

.check{cursor: pointer;
background-color: #00FFFF;
padding: 10px 0px 10px 0px; 
margin: 5px;}

.red{background-color: #E33A6D;}
.green{background-color: #7bc52e;}
</style>

<Ul class="lisCl">
    <li class="seminar" id="js">
        <h3>JavaScript勉強会</h3>
        <p class="check">空き状況を確認</p>
    </li>
    <li class="seminar" id="security">
        <h3>セキュリティ対策講座</h3>
        <p class="check">空き状況を確認</p>
    </li>
    <li class="seminar" id="uiux">
        <h3>UI/UXハッカソン</h3>
        <p class="check">空き状況を確認</p>
    </li>
</Ul>


ブラウザ上でのHTMLページの表示は画像の通りです。

![イメージ説明](e9e1ed8584cc03ab61caf2280d26539e.jpeg)

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

なぜ、クリックした時に発動される属性に
「$('.check').on('click', function() {」しかないのに、

クリックしたボックスだけを選んで
(※3個ある「class="check"」のある要素の中からクリックされたものだけを選んで)
イベントを発動させることが出来るのでしょうか?

いえ、イベントはどのチェックボックスでも同じように発動します。動いたイベントハンドラの中身で、どのチェックボックスがチェックされたかを識別して、別個の動作を行います。

この場合の「$(this)」は「クリックされた対象」
(=「$('.check')」の中でクリックされた要素)
と思って良いのでしょうか?

はい、そのとおりです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/19 16:23

    解答して頂きありがとうございます。

    アドバイスを読み返して理解出来ました。

    >いえ、イベントはどのチェックボックスでも同じように発動します。

    イベントは全てのボックスで発動している

    ----

    この場合の「$(this)」は「クリックされた対象」
    (=「$('.check')」の中でクリックされた要素)
    と思って良いのでしょうか?
    >はい、そのとおりです。

    >動いたイベントハンドラの中身で、どのチェックボックスがチェックされたかを識別して、別個の動作を行います。

    イベントは発動しているけれど、
    実際にテキスト入れ替えたり、背景色を変える対象になる要素は

    「if($(this).hasClass('crowded'))」なので
    「$(this)」=クリックされた要素だけ。

    ということですね。よくわかりました。

    今回は解答して頂きありがとうございます。
    機会がありましたら、またお願いします。

    ※質問はしばらく開けておきます。

    キャンセル

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

  • ただいまの回答率 88.20%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る