Home > Developer > Web Develop
The code provided is an editor component, but the functionality is not complete, and you need to bind related events to the Editor's toolbar buttons (you can use JQuery), specifically as follows:
1. Binding the Click event for the #js-add-fontsize elementChanges the text font in the editor to 20px after the event is triggered.
2. Binding the Click event for the #js-CHANGE-BG elementWhen the event is triggered, the editor's background color value is "#6b6b6b" and the text color is "#fff".
3. Binding the Click event for the #js-toggle-opacity button elementWhen the event is triggered, if #editor element transparency (opacity) is greater than 0, set #editor element transparency to 0, otherwise set #editor element transparency to 1.
The HTML structure is as follows:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Write a JQuery event listener</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> <!--please complete the exercise in the Index.js file - <textareaID= "Editor">After the study, I believe you have a certain understanding of the next degree. The so-called beginning of a single step, now we start the first project to work it:) project description Before starting a professional study, we want to listen to your voice, so I hope you write a simple feeling according to the following two points: share what you want to be a front-end engineer's original intention is what; write down your The planning of your future career, including your phased goals, the goals you ultimately want to achieve, and suggesting that you write down your true ideas will help us get to know you better. Your homework will be reviewed by our Imweb technical experts, who will combine their experience to give you some valuable advice. After the project review rules receive your project assignments, we will give you a review of the results within 7 days, please return to this page for review. </textarea> <DivID= "Operation"> <ButtonID= "Js-add-fontsize">Editor text becomes larger</Button> <ButtonID= "JS-CHANGE-BG">Editor Color dimmed</Button> <ButtonID= "Js-toggle-opacity">Show/Hide Editor</Button> </Div> <!--Introducing jquery - <Scriptsrc= "Https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></Script></Body></HTML>
The requirements for writing index.js are as follows
var$editor = $ (' #editor ');//have given$(' #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); }});
Note: The first reason is not right--#editor element Transparency (opacity) and the writing of later value
At first, the CSS was omitted, and the numbers were enclosed in quotation marks, as well as a comma-==/=.
Official answer:
There are two ways to implement the function of the editor button:
1. Add an event listener on each button elementIdeas:
//Get editor Elementvar$editor = $ (' #editor ');/** 1, for #js-add-fontsize element Binding Click event * Change the text font in the Editor 2 px after event trigger, if the original font size is 14px, click #button1*/$(' #js-add-fontsize '). Click (function() {v $editor. CSS (' Font-size ', ' 20px ');});/** 2, for #js-CHANGE-BG element Binding Click event * Change the background color of the editor to "#6b6b6b" after the event is triggered, the text color is "#fff"*/$(' #js-change-bg '). Click (function() {$editor. css ({' Background-color ': ' #6b6b6b ', ' Color ': ' #fff ' });});/** 3, for #js-toggle-visibility button Element binding Click event * When the event is triggered, if #editor element transparency (opactity) is greater than 0, set #editor element transparency to 1, otherwise set #edit or element transparency is 0*/$(' #js-toggle-opacity '). Click (function() { if($editor. CSS (' opacity ') > 0{ $editor. css ( ' opacity ', 0); } Else{ $editor. css ( ' opacity ', 1); }});2. Using the event Agent (delegate)
Ideas:
#operationIt is necessary to understand that event delegation is an application of event bubbling, the listener and execution of the event is fully delegated to its parent node, it can reduce the number of child element binding events, and do not have to worry that the child node may need to be re-bound after being replaced. If a page contains a large number of elements that require binding events, doing so reduces the number of event bindings while improving page performance.
On event binding, JQuery provides a more general function:
On (EVENTS,[SELECTOR],[DATA],FN)
Parameters:
As shown below:
var$editor = $ (' #editor ');$(' #operation '). On (' Click ', ' button ',function() { //gets the ID of the button varBtnid = $ ( 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); } }});
Bind an event to a set of buttons--[js practice]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
