题目要求
提供的代码是一个编辑器组件，但功能还不完善，需要为该编辑器的工具栏按钮绑定相关事件(可使用 jQuery )，具体要求如下：
1、为 #js-add-fontsize 元素绑定 click 事件
当事件触发后改变编辑器内文本字体为 20px。
2、为 #js-change-bg 元素绑定 click 事件
当事件触发后改变编辑器的背景颜色色值为 "#6b6b6b", 文字颜色为 "#fff"。
3、为 #js-toggle-opacity 按钮元素绑定 click 事件
当事件触发后，如果 #editor 元素透明度（ opacity ）大于 0, 则设置 #editor 元素透明度为 0，否则设置 #editor 元素透明度为 1。
HTML结构如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>编写一个 jQuery 事件监听器</title> <style> #editor { width: 90%; display: block; height: 300px; margin: 20px auto; padding: 10px; font-size: 14px; line-height: 1.5; background-color: ‘#fff‘; color: ‘#000‘; } #operation { text-align: center } button { background: #fff; color: #000; border: 2px solid #000; padding: 10px; border-radius: 4px; } </style> </head> <body> <!-- 请在index.js文件中完成练习 --> <textarea id="editor"> 经过刚才的学习，相信你对Next学位有一定的了解了。所谓千里之行，始于足下，现在我们着手开始第一份项目作业吧：） 项目说明 在开始专业学习前，我们想先听听你的声音，所以希望你根据以下两点写一篇简单的感想： 分享一下你想成为前端工程师的初衷是什么； 写下你对未来职业的规划，包括你的阶段性目标、你最终希望达到的目标； 建议你将自己的真实想法写下来，这有助于我们进一步了解你。你的作业将会由我们Imweb的技术专家团来审阅，他们会结合自己的经验，给你提出一些有价值的建议。 项目审阅规则 收到你的项目作业后，我们会在7天内将审阅结果反馈给你，请届时返回此页面进行查看。 </textarea> <div id="operation"> <button id="js-add-fontsize">编辑器文字变大</button> <button id="js-change-bg">编辑器颜色变暗</button> <button id="js-toggle-opacity">显示/隐藏编辑器</button> </div> <!-- 引入jQuery--> <script src="https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script> </body> </html>
要求写的index.js如下
var $editor = $(‘#editor‘); //已给 $(‘#js-add-fontsize‘).on(‘click‘,function(event){ $editor.css(‘font-size‘,‘20px‘); }); $(‘#js-change-bg‘).on(‘click‘,function(event){ $editor.css(‘background‘,‘#6b6b6b‘); $editor.css(‘color‘,‘#fff‘); }); $(‘#js-toggle-opacity‘).on(‘click‘,function(event){ if ($editor.css(‘opacity‘)>0) { $editor.css(‘opacity‘,0); } else{ $editor.css(‘opacity‘,1); } });
注意：第一次没对的原因在于——#editor 元素透明度（ opacity ）判断和后期取值的写法问题
一开始漏了其中的css，还有把数字也用引号包裹了，还有没用逗号用的==/=
官答：
实现编辑器按钮的功能，可以有两种方式：
1、在每个按钮元素上添加事件监听器
思路：
- 获取编辑器元素和按钮元素
- 给每个按钮写一次事件绑定
// 获取编辑器元素 var $editor = $(‘#editor‘); /* * 1、为 #js-add-fontsize 元素绑定 click 事件 * 当事件触发后改变编辑器内文本字体增大 2 px，如原来字体大小为 12 px，点击 #button1 则变成 14px */ $(‘#js-add-fontsize‘).click(function() {v $editor.css(‘font-size‘, ‘20px‘); }); /* * 2、为 #js-change-bg 元素绑定 click 事件 * 当事件触发后改变编辑器的背景颜色色值为 "#6b6b6b", 文字颜色为 "#fff" */ $(‘#js-change-bg‘).click(function() { $editor.css({ ‘background-color‘: ‘#6b6b6b‘, ‘color‘: ‘#fff‘ }); }); /* * 3、为 #js-toggle-visibility 按钮元素绑定 click 事件 * 当事件触发后，如果 #editor 元素透明度（ opactity ）大于 0, 则设置 #editor 元素透明度为1，否则设置 #editor 元素透明度为0 */ $(‘#js-toggle-opacity‘).click(function() { if ($editor.css(‘opacity‘) > 0) { $editor.css(‘opacity‘, 0); } else { $editor.css(‘opacity‘, 1); } });
2、使用事件代理（委托）
思路：
- 获取编辑器元素和按钮父元素
#operation - 将按钮的事件委托到按钮父元素，通过按钮父元素来分发请求
需了解的是：事件委托是事件冒泡的一个应用，将事件的监听和执行操作完全委托给了其父节点，可以减少子元素绑定事件的个数，也不必担心子节点被替换后可能需要进行重新的事件绑定。如果页面中含有大量元素需要绑定事件，这样做会减少事件绑定数量，同时提高页面性能。
在事件绑定上，jQuery 提供了一种更通用的函数：
on(events,[selector],[data],fn)
参数：
- events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
- selector[可选]:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
- data[可选]:当一个事件被触发时要传递event.data给事件处理函数。
- fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
将上述的功能改用on函数实现
下面所示：
var $editor = $(‘#editor‘); $(‘#operation‘).on(‘click‘, ‘button‘, function() { // 获取button的id var btnId = $(this).attr(‘id‘); switch(btnId) { case ‘js-add-fontsize‘: $editor.css(‘font-size‘, ‘20px‘); break; case ‘js-change-bg‘: $editor.css({ ‘background-color‘: ‘#6b6b6b‘, ‘color‘: ‘#fff‘ }); break; case ‘js-toggle-opacity‘: if ($editor.css(‘opacity‘) > 0) { $editor.css(‘opacity‘, 0); } else { $editor.css(‘opacity‘, 1); } } });
