点击div获取元素data属性并动态修改按钮跳转链接问题求助

问题排查&修复 #

原代码错误点 #

• 事件绑定到父容器#product后，this指向的是父容器本身，不是你点击的A/B/C子元素，无法获取子元素的自定义属性
• 原生JS读取data-*属性的语法错误：不能直接写this.data-product，带横杠的属性名不能直接用点运算符调用，会被JS解析为减法运算，直接触发语法错误
• 没有做点击事件的目标判断，点到父容器内其他非选项区域也会触发逻辑，会拿到无效的空值

修复方案1：原生JS实现 #

document.getElementById("product").addEventListener('click', function(e) {
  // 仅点击A/B/C选项时才执行逻辑
  if(e.target.classList.contains('items-uniqueItem')) {
    const productVal = e.target.dataset.product
    const idVal = e.target.dataset.id
    document.getElementById("purchase").href = `/?add-to-cart=${productVal}&variation_id=${idVal}`
    // 如果原规则要求参数末尾加斜杠，把上一行末尾改成`/?add-to-cart=${productVal}&variation_id=${idVal}/`即可
  }
})

修复方案2：使用页面已引入的jQuery实现，代码更简洁 #

$('#product').on('click', '.items-uniqueItem', function() {
  $('#purchase').attr('href', `/?add-to-cart=${$(this).data('product')}&variation_id=${$(this).data('id')}`)
})

验证方式 #

点击对应A/B/C元素后，右键检查购买按钮，查看href属性是否已经替换为对应参数的链接即可确认是否生效。

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