如何通过jQuery按元素id为WordPress站点SVG商铺地图的data属性赋值

原有代码问题说明 #

• 未遍历单个商铺元素，批量操作会导致所有元素属性值统一
• data-* 是元素自身属性而非子元素，不能使用 find() 方法查找
• val() 仅适用于表单元素赋值，无法用来修改普通DOM节点的自定义属性

正确实现代码 #

ES6+ 兼容版本 #

// 等待页面DOM全部加载完成后执行
$(document).ready(function() {
  // 遍历所有class为shop的元素
  $(".shop").each(function() {
    // 取当前元素的id值
    const currentShopId = $(this).attr("id");
    // 给当前元素赋值对应的data属性
    $(this).attr("data-title", `shop-name('${currentShopId}')`);
    $(this).attr("data-open", `shop-opening-hours('${currentShopId}')`);
  });
});

低版本JS兼容版本 #

如果你的站点不支持ES6模板字符串，可以用字符串拼接的写法：

$(document).ready(function() {
  $(".shop").each(function() {
    var currentShopId = $(this).attr("id");
    $(this).attr("data-title", "shop-name('" + currentShopId + "')");
    $(this).attr("data-open", "shop-opening-hours('" + currentShopId + "')");
  });
});

注意事项 #

• 如果你的SVG是通过AJAX动态插入到页面的，需要在SVG插入完成的回调函数中执行上述代码，不要放在$(document).ready()中，避免找不到元素
• 此处使用attr()方法是为了直接修改DOM节点上的属性值，和你预期的输出效果完全一致；如果使用data()方法仅会把值存在jQuery缓存中，不会同步到DOM结构上

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