基于JSON查询实现输入成员名后列表项背景变色（jQuery优先）

我来帮你修复这个功能，让它按照预期工作——当你在输入框中输入成员姓名并失去焦点时，对应的父级<li>元素会根据预设的JSON信息切换背景色。先梳理下现有代码里的几个关键问题，再给出完整的修正方案：

现有代码的问题点 #

• 错误使用了val()方法设置<li>的样式：<li>是普通元素，没有val()方法，应该用css()来修改背景色
• getBackground函数逻辑错误：
  • return语句之后的代码永远不会执行，所以原代码里的$(this).css(...)根本不会运行
  • 直接用members的索引去取standing的背景色，这依赖两个数组的顺序完全对应，一旦顺序变动就会匹配错误，正确的逻辑应该是通过成员的Class去匹配standing里的对应项
• 重复绑定事件：每个input单独绑定blur事件，代码冗余，可通过批量选择简化

完整修正代码 #

HTML（保持不变）

<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>

JavaScript（jQuery方案）

<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" } 
]; 

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

// 修正后的背景色查找函数
function getBackground(name) {
  // 先找到对应姓名的成员Class
  var member = members.find(item => item.Name === name);
  if (!member) return null; // 如果找不到成员，返回null
  
  // 根据Class找到对应的背景色
  var standingItem = standing.find(item => item.code === member.Class);
  return standingItem ? standingItem.background : null;
}

// 批量绑定所有输入框的blur事件
$("input[id^='I']").on("blur", function() {
  var inputValue = $(this).val().trim(); // 去除首尾空格
  var bgColor = getBackground(inputValue);
  
  // 找到父级<li>并设置背景色，如果没找到则清空背景
  var parentLi = $(this).closest("li");
  if (bgColor) {
    parentLi.css("background-color", bgColor);
  } else {
    parentLi.css("background-color", ""); // 清空背景
  }
});
</script>

代码说明 #

1. 优化的查找逻辑：用Array.find()替代for循环，代码更简洁易读，而且通过成员的Class字段去匹配standing里的背景色，不再依赖数组顺序，更健壮
2. 批量事件绑定：用input[id^='I']选择所有id以I开头的输入框，一次绑定blur事件，避免重复代码
3. 可靠的父元素查找：用closest("li")找到输入框最近的父级<li>，比parent()更灵活，即使HTML结构微调也能正常工作
4. 容错处理：如果输入的姓名不存在，会清空<li>的背景色，避免残留错误样式

内容的提问来源于stack exchange，提问作者verlager