+ Start a Discussion
Simon234Simon234 

Change the style of 1st list's element through onclick from 2nd list's element

I have 2 lists. First is all my objects. Second - selected object (I use "Select" button to add my obj to second list but without deliting it in the first list). I can also delete the objects from the second list. But how can I change the "Select" button's style from first list if I delete the element from second list?

cmp:
<aura:attribute name="objs" type="Obj__c[]"/>
<aura:attribute name="selectedObjs" type="Obj__c[]"/>

<div class="slds-grid slds-gutters divMain">
    <div class="slds-col div1Column">
        <aura:iteration items="{!v.objs}" var="obj" indexVar="index">     
            <lightning:layout multipleRows="true" class="layoutBigCardsColumn">
                <div data-index="{!index}" aura:id="divDetailsId">
                    <p><b>about {!obj.Name}</b></p>
                    //I need to change style of this btn:
                    <lightning:button aura:id="buttonSelectId" label="Select" name="{!obj}" class="buttonSelect" onclick="{!c.select}"/>
                </div>
            </lightning:layout>
        </aura:iteration>
    </div>

    <div class="slds-col div2Column">
        <lightning:layout horizontalAlign="center" multipleRows="true" class="layoutCardsColumn">
            <span class="selectedJobsTop">
                <aura:if isTrue="{!v.selectedObjs != null}">
                    <aura:iteration items="{!v.selectedObjs}" var="selectedObj" indexVar="index">
                        <div class="slds-panel__body layoutLittleCards">
                            <p>
                                <b>{!selectedObj.Name}</b>
                                <span class="spanButtonClose">
                                    //When I click "close", I need to change the style of needed "Select" btn:
                                    <lightning:buttonIcon name="{!index}" iconName="utility:close" onclick="{!c.deselect}"/>
                                </span>
                            </p>
                        </div>
                    </aura:iteration>
                </aura:if>
            </span>
        </lightning:layout>
    </div>
</div>
Needed functions from js:
select : function(component, event, helper) {
    let selectedObjs = component.get("v.selectedObjs");
    selectedObjs.push(event.getSource().get("v.name"));
    component.set("v.selectedObjs", selectedObjs);

    let selectButton = event.getSource();   
    selectButton.set("v.disabled", true);
    selectButton.set("v.class", "changeButtonColor");
},

deselect : function(component, event, helper) {
    let objs = component.get("v.objs");
    let selectedObjs = component.get("v.selectedObjs");

    let infos = component.find("buttonSelectId");

    let toDeletIndex =  event.getSource().get("v.name");
    selectedObjs.splice(toDeletIndex, 1);        
    component.set("v.selectedObjs", selectedObjs);

    for(let j=0; j<objs.length; j++){
        for (let i=0; i<selectedObjs.length; i++){
            if((objs[j].Id) == (selectedObjs[i].Id)){
                //I can get here currend array of selected objs,
                //but how can I change style of "Select" btn of removed (from here) obj?
                console.log(selectedObjs[i].Id);
            }           
        }
    }
},

 
Team Codekiat.comTeam Codekiat.com
May be you need to set an unique identifier to all buttons in the first list and map the same id/attribute to the record which you add to the second list. whenever you delete any record, with that unique attribute you can make changes in the first list. 

Naveen 
Simon234Simon234
Thank you, Codengine.in. But can we do this with data-index="{!index}"? And if yes - how?