focusout触发时另一input值变为undefined的前端问题求助

问题根源 #

• 变量作用域错误：你将存储邮箱和来源的a、b变量声明在focusout事件回调的内部，每次任意一个输入框触发失焦事件时，这两个变量都会被重新初始化为undefined，仅当前触发失焦的输入框对应的变量会被赋值，另一个变量始终为空。
• 取值逻辑错误：每次失焦事件触发时，你仅读取了当前触发事件的输入框的值，没有主动拉取另一个输入框的当前值，自然无法同时拿到两个输入框的完整数据。
• 选择器匹配错误：JS代码中使用的选择器是$('.form-group.wa-button')，但你提供的HTML里输入框的父元素仅带有wa-button类，没有form-group类，该选择器实际无法匹配到任何元素（如果实际业务代码没有额外加form-group类的话，这也是导致功能失效的原因之一）。

修正后的实现代码 #

// greetings 为你定义的全局变量
// 直接监听两个输入框的失焦事件，无需额外遍历
$('.wa-button input').on('focusout', function() {
  // 每次触发事件时，主动拉取两个输入框的最新值
  const emailVal = $('input[name="email"]').val().trim();
  const findUsVal = $('input[name="find_us"]').val().trim();
  
  // 可根据业务需求调整校验规则，此处示例两个输入框都符合要求才更新链接
  if (emailVal && findUsVal.length >= 5) {
    $('#button-wa').attr('href', `${greetings} my email is ${emailVal} and find from ${findUsVal}`);
  }
})

可选优化建议 #

• 可以把focusout事件替换为input事件，用户输入过程中就会实时更新链接，不需要等输入框失焦，使用体验更好。
• 你当前两个label的for属性都是dialog-find，但对应的input都没有设置匹配的id，建议给两个输入框分别添加id，同时修改label的for属性对应，符合网页无障碍规范。

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