点击按钮时获取邻近锚点标签的value与href值失败排查

首先，你的核心问题出在选择器的上下文错误和可能的DOM结构匹配问题，导致无法正确定位到点击按钮对应的目标a标签。我来一步步拆解：

1. 为什么原代码拿不到值？ #

你用了$('.show_field').closest('a')，这里有两个致命问题：

• 全局查找而非上下文查找：$('.show_field')会匹配页面上所有带show_field类的元素，而不是当前点击的按钮附近的那个。这会导致你拿到的可能是页面第一个show_field对应的a标签，甚至是完全不相关的元素。
• closest()的匹配逻辑：closest('a')是向上遍历DOM树查找最近的a标签祖先，如果你的.show_field并不是嵌套在目标a标签内部，这个方法会返回空的jQuery对象，自然attr()获取到的就是undefined。

2. 修正方案：基于点击按钮的上下文定位 #

首先你需要明确按钮和目标a标签的DOM结构关系，下面针对两种常见结构给出解决代码：

情况1：按钮和a标签是兄弟元素（同一父容器下）

<div class="input_fields_wrap">
  <div class="link-item">
    <a href="/example" data-name="测试链接"><span class="show_field">测试链接</span></a>
    <button class="addlink-edit-icon">编辑</button>
  </div>
</div>

对应的JS代码应该基于this（当前点击的按钮）来查找父容器内的a标签：

$(document).ready(function() {
  $('.input_fields_wrap').on("click",".addlink-edit-icon",function (e) {
    e.preventDefault();
    // 找当前按钮所在父容器下的a标签
    var target = $(this).closest('.link-item').find('a');
    // 如果结构确定是兄弟关系，也可以直接用：var target = $(this).siblings('a');
    
    // 获取href和自定义属性（注意：a标签没有原生value属性，推荐用data-*）
    var edit_href = target.attr('href');
    // 用data()方法获取自定义data属性更规范
    var edit_name = target.data('name');
    // 如果一定要用value属性，用attr()获取：var edit_name = target.attr('value');
    
    console.log(edit_name, edit_href);
  });
});

情况2：按钮嵌套在a标签内部

<div class="input_fields_wrap">
  <a href="/example" data-name="测试链接">
    <span class="show_field">测试链接</span>
    <button class="addlink-edit-icon">编辑</button>
  </a>
</div>

这种情况下可以直接用closest('a')，但要基于当前按钮：

$(document).ready(function() {
  $('.input_fields_wrap').on("click",".addlink-edit-icon",function (e) {
    e.preventDefault();
    // 基于当前按钮向上找最近的a标签
    var target = $(this).closest('a');
    
    var edit_href = target.attr('href');
    var edit_name = target.data('name');
    
    console.log(edit_name, edit_href);
  });
});

3. 额外提醒：规范使用自定义属性 #

HTML的a标签并没有原生的value属性，虽然浏览器可能会解析，但这不符合规范。推荐用data-*系列属性来存储自定义值，比如data-name="xxx"，然后用jQuery的data()方法获取，这样更符合HTML标准，也避免潜在的兼容性问题。

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