専門書のコードが読み解けないので、アドバイスをお願いします。

$(documtnt.body)[this.checked ? 'on' : 'off'](this.value, handler)
上記のコードについてなのですが分かりにくいです。

1 「[this.checked ? 'on' : 'off']」について
this.checkeがtrueの場合は$(documtnt.body)['on'](this.value, handler)となる
this.checkeがfalseの場合は$(documtnt.body)['off'](this.value, handler)となる

2 「$(documtnt.body)['on']」は「$(documtnt.body).on」と同じということでしょうか。

「改訂新版jQuery本格入門_サンプルコード_P266より」一部編集しています。
よろしくお願い致します。

jQuery
1$(function() {
2
3  // 一覧に表示させるプロパティ
4  const props = [
5    'target',
6    'currentTarget',
7    'relatedTarget',
8    'fromElement',
9    'toElement'
10  ];
11
12  // 要素の内容を文字列に変換
13  function toHtml(element) {
14    if (!element) { return `---`; }
15
16    if (element === window) {
17      return 'window';
18    } else if (element === document) {
19      return 'document';
20    }
21
22    let html;
23
24    if (element && element.tagName) {
25        html = '<${ element.tagName.toLowerCase() }';
26    }
27
28    if (element.attributes) {
29      const attrs = element.attributes;
30      for (const index in attrs) {
31        const attr = attrs[index];
32        if (!attr || attr.name === 'style' || !attr.value) { continue; }
33        html += ` ${ attr.name }="${ attr.value }"`;
34      }
35    }
36
37    if (html) { html += '>'; }
38    return html;
39  }
40
41  // イベントハンドラ(一覧表に要素を表示)
42  const handler = function(event) {
43    $.each(props, function(index, property) {
44      $(document.getElementById(property)).text(toHtml(event[property]));
45    });
46  };
47
48  // ラジオボタンの設定
49  const form = $('<form>', {
50    submit : false,
51    css    : { 'margin' : '10px 0' }
52  }).appendTo(document.body);
53
54  $.each([ 'over', 'out', 'move', 'down', 'up' ], function(index, name) {
55    $('<input>', {
56      'name'   : 'event',
57      'type'   : 'radio',
58      'val'    : `mouse${ name }`,
59      'change' : function() {  // 実行するイベント処理の切り替え
60        $('input[type="radio"]').each(function() {
61          $(document.body)[this.checked ? 'on' : 'off'](this.value, handler);
62        });
63        $('td').text(`---`);
64      }
65    }).appendTo(form);
66    form.append(`mouse${ name }`);
67  });
68
69  $(document).ready(function() {
70    $('input[type="radio"]')
71      .first()
72      .prop('checked', true)
73      .triggerHandler('change');
74  });
75
76  // マウスカーソルを移動させる領域
77  const parent = $('<div>', {
78    'height' : 200,
79    'id'     : 'parent',
80    'text'   : 'parent',
81    'width'  : 200,
82    'css'    : {
83      'border'   : '1px solid black',
84      'float'    : 'left',
85      'padding'  : 5,
86      'position' : 'relative'
87    }
88  }).appendTo(document.body);
89
90  const child  = $('<div>', {
91    id   : 'child',
92    text : 'child',
93    css  : {
94      'border'   : '1px dashed black',
95      'height'   : 100,
96      'left'     : 45,
97      'padding'  : 5,
98      'position' : 'relative',
99      'top'      : 30,
100      'width'    : 100
101    }
102  }).appendTo(parent);
103
104  // プロパティの一覧表
105  const table = $('<table>', {
106    css : {
107      'borderCollapse' : 'collapse',
108      'float'          : 'left',
109      'margin'         : '10px 0',
110      'marginLeft'     : '1em'
111    }
112  }).appendTo(document.body);
113
114  $.each(props, function(index, property) {
115    const tr = $('<tr>');
116    $('<th>', {
117      'text' : property,
118      'css'  : {
119        'padding'   : 3,
120        'textAlign' : 'left'
121      }
122    }).appendTo(tr);
123
124    $('<td>', {
125      'id'  : property,
126      'css' : {
127        'padding'    : 3,
128        'whiteSpace' : 'nowrap'
129      }
130    }).appendTo(tr);
131
132    table.append(tr);
133  });
134
135});

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6  <link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9
10<script src="js/jquery-3.6.0.min.js"></script>
11<script src="js/app.js"></script>
12</body>
13</html>

回答2件

ベストアンサー

1 「[this.checked ? 'on' : 'off']」について
this.checkeがtrueの場合は$(documtnt.body)['on'](this.value, handler)となる
this.checkeがfalseの場合は$(documtnt.body)['off'](this.value, handler)となる

はい。それで合ってます。

2 「$(documtnt.body)['on']」は「$(documtnt.body).on」と同じということでしょうか。

同じです。あるオブジェクトobjに hello というプロパティがあるときに、ブラケット表記で obj['hello'] としてもhelloプロパティを参照できます。hello プロパティが関数であるとき、つまり objのメソッドであるときは obj['hello']() とすればこのメソッドを実行することになります。

従って質問にある

javascript
1$(documtnt.body)[this.checked ? 'on' : 'off'](this.value, handler)

の一行は以下と同じです。

javascript
1if (this.checked)
2  $(documtnt.body).on(this.value, handler)
3else
4  $(documtnt.body).off(this.value, handler)

投稿2022/11/14 13:58

退会済みユーザー

総合スコア0

回答へのコメント

taka_oct092018

2022/11/15 12:13

su507様、返信ありがとうございます。詳細な説明をして頂き、より深く理解出来ました。 JavaScriptはどうしてブラケット記法・ドット記法の別な文法が用意されているか不思議でしたが、このコードのように柔軟にプログラムが書けて面白いです。初心者の私にはかなり難しいですが…。

三項演算子、でぐぐってみるとよろしいかと。

投稿2022/11/14 13:48

y_waiwai

総合スコア86794

回答へのコメント

taka_oct092018

2022/11/15 12:12

y_waiwai様、返信ありがとうございます。またよろしくお願い致します。

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

タブの切り替え時にふわっと表示させたい。

回答2

クリップ0

更新

2023/06/06

Q&A

解決済

ハンバーガーメニューの挙動について（transitionが、もとに戻る時には適応されない）

回答2

クリップ0

更新

2023/06/02

Q&A

解決済

Html 要素の幅を取得するには?

回答1

クリップ1

更新

2023/06/02

Q&A

解決済

ナビゲーションバーとドロップダウンメニュー、両方の位置を固定するには?

回答1

クリップ0

更新

2023/05/26

Q&A

解決済

コンタクトフォームで入力しなければ、送信できないようにしたい。

回答1

クリップ0

更新

2023/05/12

Q&A

解決済

正規表現を利用した入力値チェックのコードが分かりません。

回答1

クリップ1

更新

2023/06/05

Q&A

解決済

Laravel viteにてjavascriptをviewに読み込ませたいが、エラー ($string) must be of type string, array givenが表示される

回答2

クリップ0

更新

2023/05/02

Q&A

解決済

スマホでクリックとドラッグ＆ドロップを反応させる方法

回答1

クリップ2

更新

2023/06/04

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

トップ JavaScriptに関する質問

専門書のコードが読み解けないので、アドバイスをお願いします。

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

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