$(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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2022/11/15 12:13