如何获取WooCommerce面包屑导航中被点击链接的对应文本值

问题原因 #

你的代码存在两个核心问题：

• 点击事件绑定在了整个面包屑容器.woocommerce-breadcrumb上，只要点击容器范围内的任意位置都会触发事件
• 取值时调用jQuery(this).children('a').text()会提取容器下所有a标签的文本拼接结果，所以会同时输出home和music两个值

修复后的代码 #

只需把事件委托的目标调整为面包屑下的a标签即可实现需求：

jQuery(document).on('click', '.woocommerce-breadcrumb a', function() {
  var eventLabel = jQuery(this).text().trim();
  console.log(eventLabel);
});

代码说明 #

• 事件绑定目标修改为.woocommerce-breadcrumb a，只有点击面包屑内的链接才会触发事件
• 直接用jQuery(this)获取当前被点击的a标签元素，取值只会取当前点击元素的文本，不会拿到其他链接的内容

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