I have lightning component with below code. I trying change class on aura:id="xcont" when i click a checkbox. background-silver to background-red
<div aura:id="xcont" class="slds-button slds-checkbox--button background-silver">
<label class="answears slds-checkbox--button__label">
<ui:inputCheckbox aura:id="x" label="label" click={!c.voidJS}" class="line" />
</label>
</div>
<div aura:id="xcont" class="slds-button slds-checkbox--button background-silver">
<label class="answears slds-checkbox--button__label">
<ui:inputCheckbox aura:id="x" label="label" click={!c.voidJS}" class="line" />
</label>
</div>
I trying use jQuery for this - this is my function from js controller:
voidJS: function (component, event, helper) {
var clicked = event.getSource().localId;
$('#' + clicked).parent().parent().addClass('myclass');
}
css
.THIS .background-silver {
background: linear-gradient(to bottom, #FAFAFA 0%, #EEEEEE 100%);
}
.THIS .background-red{
background: linear-gradient(to bottom, #FF7043 0%, #FF5722 100%);
}