CODEWITHSUNDEEP
javascriptloopsobject
user2112618
user2112618

Reputation: 326

Javascript Looping through object values and changing the css based on value

I am writing a script that loops through an object to first get the elements and then I am trying to loop through the value of the elements so i can change the CSS. Here is the script:

$(document).ready(function() {
var carParts = {
    doors: {
        flDoor: 'LOCKED',
        blDoor: 'LOCKED',
        frDoor: 'LOCKED',
        brDoor: 'LOCKED'
    }
}
var lights = 'OFF';
if (lights === 'OFF') {
    $('.lights').css("display", "none");
}

for(var i in carParts.doors) {
    for(var key in carParts.doors) {
        var value = carParts.doors[key];
        console.log(value);
        if (value === 'locked') {
            $('.'+i+'-open').css("display", "none");
        }
    }
}
})

So i want to loop through the carparts.door object and get the actual flDoor, blDoor, frDoor, brDoor. These names are needed in the final jquery line to assign the proper class name. I don't want that line to fire unless the actual value is locked though. I'm newer to javascript and still learning. I appreciate any feedback you have on the code.

Upvotes: 0

Views: 565

Answers (1)

user1823761
user1823761

Reputation:

Working FIDDLE Demo

The LOCKED is in uppercase. You are comparing with the lowercase. Try this:

if (value === 'LOCKED') {
    //
}

And why you have two loops? One is enough.

HTML

<div class="flDoor-open">flDoor</div>
<div class="blDoor-open">blDoor</div>
<div class="frDoor-open">frDoor</div>
<div class="brDoor-open">brDoor</div>

JavaScript

$(function () {
    var carParts = {
        doors: {
            flDoor: 'OPENED',
            blDoor: 'OPENED',
            frDoor: 'LOCKED',
            brDoor: 'LOCKED'
        }
    };

    for (var key in carParts.doors) {
        var value = carParts.doors[key];

        if (value === 'LOCKED') {
            $('.' + key + '-open').css("display", "none");
        }
    }
});

Upvotes: 1

Related Questions