Javascript 基于json查找更改列表项的背景

我们的俱乐部需要在输入字段中键入成员，并根据支持json文件中的名称查找更改父li背景颜色。我更喜欢jquery解决方案，但javascript还可以

所有内容都包含在链接中

HTML:

JS:

风险价值=[{
“代码”：“A”，
“背景”：“AEF3D4”
},
{
“代码”：“B”，
“背景”：“6DDCEA”
},
{
“代码”：“C”，
“背景”：“9CC7CC”
},
{
“代码”：“D”，
“背景”：“B37F77”
}
];
变量成员=[{
“类”：“A”，
“姓名”：“鲍勃”
},
{
“类”：“C”，
“姓名”：“詹姆斯”
},
{
“类别”：“D”，
“姓名”：“托马斯”
},
{
“类别”：“B”，
“姓名”：“安东尼”
}
]
//查找背景色
函数getBackground（名称）{
var i=null；
对于（i=0；members.length>i；i++）{
if（成员[i].Name==名称）{
回归站[i].背景；
$（this.css（'background-color'，standing[i].background）；
}
}
返回；
};
$（“#I01”）。关于（“模糊”，函数（）{
$（“#L01”）.val（getBackground（$（this.val（）））；
})
$（“#I02”）。关于（“模糊”，函数（）{
$（“#L02”）.val（getBackground（$（this.val（）））；
})
$（“#I03”）。关于（“模糊”，函数（）{
$（“#L03”）.val（getBackground（$（this.val（）））；
})
$（“#I04”）。关于（“模糊”，函数（）{
$（“#L04”）.val（getBackground（$（this.val（）））；
})

您必须设置

css

而不是

val

。而且，在JSFIDLE中有多个不必要的

样式
标记。我删除了它们，并在这里添加了工作代码

对于第一个列表元素，我使用javascript添加了样式，对于其他元素，我使用jQuery向您展示了如何以这两种方式进行


var-standing=[{
“代码”：“A”，
“背景”：“AEF3D4”
},
{
“代码”：“B”，
“背景”：“6DDCEA”
},
{
“代码”：“C”，
“背景”：“9CC7CC”
},
{
“代码”：“D”，
“背景”：“B37F77”
}
];
变量成员=[{
“类”：“A”，
“姓名”：“鲍勃”
},
{
“类”：“C”，
“姓名”：“詹姆斯”
},
{
“类别”：“D”，
“姓名”：“托马斯”
},
{
“类别”：“B”，
“姓名”：“安东尼”
}
] 
$（this.css（'background-color'，'red'）；
函数getBackground（名称）{
var i=null；
对于（i=0；members.length>i；i++）{
if（成员[i].Name==名称）{
回归站[i].背景；
//$（this.css（'background-color'，standing[i].background）；//不要在'return'语句后面放任何代码
}
}
返回；
}
$（“#I01”）。关于（“模糊”，函数（）{
document.getElementById（“L01”）.style.backgroundColor=getBackground（$（this.val（））；
});
$（“#I02”）。关于（“模糊”，函数（）{
$（“#L02”）.css（{“背景色”：getBackground（$（this.val（））}）；
});
$（“#I03”）。关于（“模糊”，函数（）{
$（“#L03”）.css（{“背景色”：getBackground（$（this.val（））}）；
});
$（“#I04”）。关于（“模糊”，函数（）{
$（“#L04”）.css（{“背景色”：getBackground（$（this.val（））}）；
});
#myDiv，
#介绍{
显示：表格；
宽度：30雷姆；
保证金：2rem自动
}
李{
背景：浅绿色；
保证金：1rem；
高度：3雷姆；
线高：3rem；
列表样式类型：无；
}
输入{
背景：#fff；
高度：2em；
线高：2rem；
字体大小：1.5rem；
}

列表项的颜色（default background=“lightgreen”）将基于lookup members.Name和standing.background的返回值。有效的名字是“鲍勃”、“詹姆斯”、“托马斯”和“安东尼”。用户键入名称，按tab键（onblur），然后
列表项背景更改为standing.background。






以下是您问题的解决方案


var-standing=[{
“代码”：“A”，
“背景”：“AEF3D4”
},
{
“代码”：“B”，
“背景”：“6DDCEA”
},
{
“代码”：“C”，
“背景”：“9CC7CC”
},
{
“代码”：“D”，
“背景”：“B37F77”
}
];
变量成员=[{
“类”：“A”，
“姓名”：“鲍勃”
},
{
“类”：“C”，
“姓名”：“詹姆斯”
},
{
“类别”：“D”，
“姓名”：“托马斯”
},
{
“类别”：“B”，
“姓名”：“安东尼”
}
]
$（this.css（'background-color'，'red'）；
函数getBackground（名称）{
var i=null；
对于（i=0；members.length>i；i++）{
if（成员[i].Name==名称）{
回归站[i].背景；
$（this.css（'background-color'，standing[i].background）；
}
}
返回；
};
$（'input'）。在（'input'，function（）上{
var输入=$（this.val（）；
$（this.parent（）.css（'background-color'，searchMembers（input））；
});
功能搜索成员（名称）{
var className=''；
对于（var i=0；i

#myDiv，
#介绍{
显示：表格；
宽度：30雷姆；
保证金：2rem自动
}
李{
背景：浅绿色；
<ul id="sortable">
    <li id="L01"><input type="text" id="I01"></li>
    <li id="L02"><input type="text" id="I02"></li>
    <li id="L03"><input type="text" id="I03"></li>
    <li id="L04"><input type="text" id="I04"></li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<script>
    var standing = [{
            "code": "A",
            "background": "#AEF3D4"
        },
        {
            "code": "B",
            "background": "#6DDCEA"
        },
        {
            "code": "C",
            "background": "#9CC7CC"
        },
        {
            "code": "D",
            "background": "#B37F77"
        }
    ];
</script>

<script>
    var members = [{
            "Class": "A",
            "Name": "Bob"
        },
        {
            "Class": "C",
            "Name": "James"
        },
        {
            "Class": "D",
            "Name": "Thomas"
        },
        {
            "Class": "B",
            "Name": "Anthony"
        }
    ]
</script>

<script>
    // Lookup background color

    function getBackground(name) {
        var i = null;
        for (i = 0; members.length > i; i++) {
            if (members[i].Name === name) {
                return standing[i].background;
                $(this).css('background-color', standing[i].background);
            }
        }

        return;
    };

    $("#I01").on("blur", function() {
        $("#L01").val(getBackground($(this).val()));
    })
    $("#I02").on("blur", function() {
        $("#L02").val(getBackground($(this).val()));
    })
    $("#I03").on("blur", function() {
        $("#L03").val(getBackground($(this).val()));
    })
    $("#I04").on("blur", function() {
        $("#L04").val(getBackground($(this).val()));
    })
</script>

var standing = [{
  "code": "A",
  "background": "#AEF3D4"
},
{
  "code": "B",
  "background": "#6DDCEA"
},
{
  "code": "C",
  "background": "#9CC7CC"
},
{
  "code": "D",
  "background": "#B37F77"
}
 ]; 

 var members = [{
    "Class": "A",
    "Name": "Bob"
  },
  {
    "Class": "C",
    "Name": "James"
  },
  {
    "Class": "D",
    "Name": "Thomas"
  },
  {
    "Class": "B",
    "Name": "Anthony"
  }
] 


function getBackground(name,selector) {

var i = null;
for (i = 0; members.length > i; i++) {
  if (members[i].Name == name) {
    for (k = 0; standing.length > k; k++) {
        if (members[i].Class == standing[k].code) {
       $(selector).parent().css('background-color', standing[k].background);
      }
    }

  }
}

return;
};

$("#I01").on("blur", function() {
  getBackground($(this).val(),this);
})
$("#I02").on("blur", function() {
  getBackground($(this).val(),this);
})
$("#I03").on("blur", function() {
  getBackground($(this).val(),this);
})
$("#I04").on("blur", function() {
    getBackground($(this).val(),this);
 })