I am trying to run some javascript on a listitem response to set the background color depending on a value of the response itself. But only the first item in the list accurately reflects the javascript.
Value is the current iteration of the list response ($[]), so I check the type response and when the match is detected I try to change the list element's attributes. What did I do wrong? I tried $(this) also.
if(value.type === "Type1"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/1.png');
$(element).find(Appery('itemHeader')).css('background-color', '#A0D0F7');
}
else if(value.type === "Type2"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/2.png');
$(element).find(Appery('itemHeader')).css('background-color', '#F7F4A0');
}
else if(value.type === "Type3"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/3.png');
$(element).find(Appery('itemHeader')).css('background-color', '#F2417F');
}
else if(value.type === "Type4"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/4.png');
$(element).find(Appery('itemHeader')).css('background-color', '#47F241');
}
else if(value.type === "Type5"){
console.log($(element).find(Appery('headerImage')));
$(element).find(Appery('headerImage')).attr('src', 'files/views/assets/image/5.png');
$(element).find(Appery('itemHeader')).css('background-color', '#41EFF2');
}