Javascript遍历对象值并根据值更改CSS

Question

我正在编写一个脚本，该脚本循环遍历对象以首先获取元素，然后尝试循环遍历元素的值，以便可以更改CSS。 这是脚本：

$(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");
        }
    }
}
})

所以我想遍历carparts.door对象并获取实际的flDoor，blDoor，frDoor，brDoor。 在最后的jquery行中需要这些名称来分配正确的类名称。 我不希望触发该行，除非实际值被锁定。 我刚接触javascript并仍在学习。 感谢您对代码的任何反馈。

Answer 1

工作现场演示

LOCKED是大写的。 您正在与小写字母进行比较。 尝试这个：

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

又为什么有两个循环？ 一个就足够了。

的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");
        }
    }
});