Hiding and Showing Components - 134

DEX601 - Unit 2 Getting Started

📄 第 134 页 🎬 视频课程

课程章节介绍

让我们来一步步理解这段代码。这段代码是一个简单的Salesforce Lightning组件,它的功能是当你点击一个按钮时,会隐藏或显示一个文本。 首先,我们来看一下HTML部分,也就是`Clickme.cmp`文件: ```html
单击我
现在你看到我了!
``` 这里有两个`div`元素。第一个`div`是一个按钮,上面写着“单击我”。当你点击这个按钮时,会触发一个叫做`clickMe`的JavaScript函数。第二个`div`有一个`aura:id`属性,这个属性是用来在JavaScript中引用这个元素的。这个`div`里面写着“现在你看到我了!”。 接下来,我们来看一下JavaScript部分,也就是`ClickmeController.js`文件: ```javascript ({ clickMe: function(component, event, helper) { var el = component.find('response'); $A.util.toggleClass(el, 'slds-hide'); } }) ``` 这个`clickMe`函数做了两件事情: 1. `component.find('response')`:这行代码是用来找到那个`aura:id`为`response`的`div`元素。 2. `$A.util.toggleClass(el, 'slds-hide')`:这行代码是用来切换`div`元素的`class`。`slds-hide`是Salesforce Lightning Design System(SLDS)中的一个类,它可以让元素隐藏。所以,每次你点击按钮时,这个`div`就会在显示和隐藏之间切换。 总结一下,这个组件的功能就是:当你点击“单击我”按钮时,下面的“现在你看到我了!”文本会显示或隐藏。 希望这个解释对你有帮助!如果有任何问题,随时问我。