0

I have an app like below

<aura:application>
<c:FGButton class="slds-button slds-button--neutral"
         label="New Opportunity"
         svgXlinkHref="/resource/SLDS102/assets/icons/utility-sprite/svg/symbols.svg#new"
         svgClass="slds-icon slds-icon-text-default slds-icon--x-small slds-m-right--small"
         onclick="{!c.showModalBox}"/>
<c:FGCreateOpportunityModal/>
<aura:application>

Below is the modal component

    <aura:component>
    <div id="modalSection" class="slds-modal slds-fade-in-open" aria-       hidden="false" role="dialog">
   <div class="slds-modal__container">
   <div class="slds-modal__header">
                <c:FGButton class="slds-button slds-button--icon-inverse slds-modal__close"
         svgXlinkHref="/resource/SLDS102/assets/icons/action-sprite/svg/symbols.svg#close"
         svgClass="slds-button__icon slds-button__icon--large"/>
    <h2 class="slds-text-heading--medium">Create Opportunity</h2>
  </div>
  <div class="slds-modal__content slds-p-around--medium">
                <div class="slds-form--stacked">
                    <div class="slds-form-element">
                        <span class="slds-form-element__label">Opportunity Owner</span>
                        <div class="slds-form-element__control slds-has-divider--bottom">
                        <span class="slds-form-element__static">Anand Gupta</span>
                        </div>
                    </div>
                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                          <label class="slds-checkbox">
                            <input type="checkbox" name="options" id="checkbox-01" />
                            <span class="slds-checkbox--faux"></span>
                            <span class="slds-form-element__label">Private</span>
                          </label>
                        </div>
                    </div>
                    <div class="slds-form-element is-required">
                        <label class="slds-form-element__label" for="text-input-01">
                          <abbr class="slds-required" title="required">*</abbr> Opportunity Name
                        </label>
                        <div class="slds-form-element__control">
                          <input id="text-input-01" class="slds-input" type="text" required=""/>
                        </div>
                    </div>
                    <div class="slds-form-element is-required">
                            <label class="slds-form-element__label" for="text-input-01">Close Date</label>
                            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
                              <c:FGSvg class="slds-input__icon slds-icon-text-default" xlinkHref="/resource/SLDS102/assets/icons/utility-sprite/svg/symbols.svg#event" ariaHidden="true"/>
                              <input id="text-input-01" class="slds-input" type="text"/>
                            </div>
                    </div>
                    <div class="slds-form-element is-required">
                        <label class="slds-form-element__label" for="select-01">
                              <abbr class="slds-required" title="required">*</abbr> Stage
                        </label>
                        <div class="slds-form-element__control">
                              <div class="slds-select_container">
                                <select id="select-01" class="slds-select">
                                  <option>Prospecting</option>
                                  <option>Qualification</option>
                                  <option>Needs Analysis</option>
                                  <option>Value Proposition</option>
                                  <option>Id. Decision Maker</option>
                                  <option>Closed Won</option>
                                  <option>Closed Lost</option>
                                </select>
                              </div>
                        </div>
                    </div>
                </div>
  </div>
  <div class="slds-modal__footer">
         <button class="slds-button slds-button--neutral">Cancel</button>
    <button class="slds-button slds-button--neutral slds-button--brand">Save</button>
  </div>
</div>
   </div>
   <div id="backgroundSection" class="slds-backdrop slds-backdrop--open">   </div>

 </aura:component>

Now I want to toggle the class of one of the markups in the modal component on the click of the button component. How can I do this ?

One way to go about it is to use EVENTS. But button component is used to create other buttons in the application and registering an event on it would mean that it would be unnecessarily fired when any such button would be clicked.

2 Answers 2

2

Component

<aura:component>
    <div aura:id="changeIt">Change Me!</div><br />
    <ui:button press="{!c.applyCSS}" label="Add Style" />
    <ui:button press="{!c.removeCSS}" label="Remove Style" />
</aura:component>

CSS

.THIS.changeMe {
    background-color:yellow;
    width:200px;
}

Controller

{
    applyCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.addClass(cmpTarget, 'changeMe');
    },

    removeCSS: function(cmp, event) {
        var cmpTarget = cmp.find('changeIt');
        $A.util.removeClass(cmpTarget, 'changeMe');
    }
}

Source: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm

0

call a javascript function with onclick event. in this function toggle the class. for example, using jquery:

function myfunction(thisObject) {
     var compId = "#" + thisObject.Id;
     $(compId).removeClass("class1").addClass("class2");
}

Assuming here that you have unique id,for the button.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .