如何匹配JSON数据与输入值并为输入父元素设置CSS背景图？

需求说明 #

现有带动态键的JSON数据$pmsColorData，需要在jQuery的each()函数中完成以下操作：

• 对比$pmsColorData[key].name与.autocomplete-deluxe-item input的val()值
• 若二者匹配，将对应$pmsColorData[key].src设置为该输入框的父元素.autocomplete-deluxe-item的background-image CSS属性

现有代码与结构 #

HTML结构 #

<div class="field--name-field-pms-colors" data-additional-color-data="{&quot;312&quot;:{&quot;name&quot;:&quot;Black&quot;,&quot;hex&quot;:&quot;#000000&quot;,&quot;src&quot;:&quot;http://sitename/sites/default/files/pms_colors/Black.png&quot;},&quot;313&quot;:{&quot;name&quot;:&quot;Metallic Silver&quot;,&quot;hex&quot;:&quot;#D3D4DE&quot;,&quot;src&quot;:&quot;http://sitename/sites/default/files/pms_colors/Metallic%20Silver.png&quot;}}">
  <div class="autocomplete-deluxe-container">
    <span class="autocomplete-deluxe-item">Black
      <a class="autocomplete-deluxe-item-delete" href=""></a>
      <input type="hidden" value="Black"></span>
     <span class="autocomplete-deluxe-item">Metallic Silver
       <a class="autocomplete-deluxe-item-delete" href=""></a>
       <input type="hidden" value="Metallic Silver">
     </span>
  </div>
</div>

初始jQuery代码 #

$(document).ready(function() {
    makeColorCircle();
});

function makeColorCircle() {
  const $fieldPmsColor = $(".field--name-field-pms-colors");
  const $pmsColorData = $fieldPmsColor.data("additional-color-data");
  console.log($pmsColorData);
}

数据结构（$pmsColorData打印结果） #

{
    "312": {
        "name": "Black",
        "hex": "#000000",
        "src": "http://sitename/sites/default/files/pms_colors/Black.png"
    },
    "313": {
        "name": "Metallic Silver",
        "hex": "#D3D4DE",
        "src": "http://sitename/sites/default/files/pms_colors/Metallic%20Silver.png"
    }
}

实现方案 #

完整代码实现 #

$(document).ready(function() {
    makeColorCircle();
});

function makeColorCircle() {
  const $fieldPmsColor = $(".field--name-field-pms-colors");
  const pmsColorData = $fieldPmsColor.data("additional-color-data");
  
  // 遍历页面上所有颜色选择项
  $(".autocomplete-deluxe-item").each(function() {
    const $item = $(this);
    const inputValue = $item.find("input").val().trim();
    
    // 遍历动态键对应的颜色数据
    $.each(pmsColorData, function(key, color) {
      if (color.name.trim() === inputValue) {
        // 匹配成功，设置背景图片
        $item.css("background-image", `url('${color.src}')`);
        // 找到匹配项后跳出循环，提升执行效率
        return false;
      }
    });
  });
}

关键说明 #

• 双重遍历逻辑：先遍历页面中的每个颜色选择项，再遍历JSON数据的所有动态键进行匹配
• 空白处理：使用trim()去除字符串首尾空白，避免因空格差异导致匹配失败
• 性能优化：找到匹配项后通过return false终止当前$.each循环，无需遍历剩余数据
• CSS语法正确：用模板字符串拼接url()格式的背景图片路径，确保样式生效

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