jQuery获取input的data-name值拼接图片URL返回undefined如何解决

• jQuery data() 方法传参错误：data()方法读取自定义属性时，不需要携带data-前缀，你要获取data-name属性，正确写法是.data('name')，原代码写.data('data-name')无法匹配到对应属性，返回undefined，因此拼接的URL末尾会出现undefined。
• 选择器匹配逻辑错误：原代码直接用jQuery("input")会匹配页面所有input元素，默认仅返回第一个匹配元素的属性值，同时jQuery(".bapf_sfilter .bapf_img_span")会覆盖所有色板的背景图，不符合一一对应的需求，后续批量处理会出现所有色板显示同一张图的问题。

单条逻辑验证 #

可以先指定单个input的id验证逻辑正确性：

// 以id为bapf_2_286的深灰色色板为例
var getCol = jQuery("#bapf_2_286").data('name');
var imageUrl = "https://website/wp-content/uploads/2021/10/" + getCol + ".jpg";
// 精准匹配对应input所属的色板元素
jQuery("#bapf_2_286").siblings('label').find('.bapf_img_span').css('background-image', 'url("' + imageUrl + '")');

批量处理方案 #

后续大量色板适配可以直接用遍历逻辑，自动匹配所有带data-name属性的input完成设置：

jQuery('input[data-name]').each(function(){
  const $currentInput = jQuery(this);
  const colorName = $currentInput.data('name');
  const imageUrl = `https://website/wp-content/uploads/2021/10/${colorName}.jpg`;
  // 匹配当前input对应的色板元素设置背景
  $currentInput.siblings('label').find('.bapf_img_span').css('background-image', `url("${imageUrl}")`);
})

• 可以增加图片加载失败的兜底逻辑，加载失败时显示默认占位图，避免出现破碎图标
• 如果自定义属性是多单词横杠分隔格式，比如data-color-type，data()方法取值需要转驼峰，对应写法为.data('colorType')

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