jQuery获取.f_name输入框值返回undefined问题求助

核心问题：无法获取.f_name的值 #

你用$(this).closest('.f_name')是错误的——closest()只会向上遍历当前元素的父级DOM树，但.f_name输入框和触发事件的.include输入框是同一<tr>下的同级元素（分属不同<td>），并非父子关系，所以这个选择器找不到目标元素，自然返回undefined。

正确写法 #

先定位到当前元素所在的<tr>，再在这个<tr>内部查找.f_name：

var fname = $(this).closest('tr').find('.f_name').val();

其他需要修复的问题 #

• 错误的input类型：HTML里没有<input type="textarea">，要么改成<input type="text">，要么用<textarea>标签（注意textarea的内容写在标签内部，不用value属性）。
• 逻辑运算符误用：代码里的&是位运算符，判断逻辑与必须用&&，比如if (e_group != '' && flexcheck == false)。
• 重复ID违反规范：多个元素用了同一个id="transparent"和id="flow_to"，ID必须唯一，建议把id="transparent"改成class，flow_to也要改成唯一ID或用class选择。
• 字符串拼接错误：s_id + +fname多了一个加号，会把fname强制转成数字（转失败会变成NaN），改成s_id + fname即可。

修复后的完整JavaScript代码 #

$(document).ready(function() {
  $('input.include').change(function() {
    var s_id = $(this).closest('tr').attr('value');
    var fname = $(this).closest('tr').find('.f_name').val();
    var flexcheck = $(this).hasClass('ss');
    var e_group = $(this).val();
    alert(fname);
    
    if (e_group != '' && flexcheck == false) {
      $(this).closest('tr').find('#fCheck').prop('checked', true);
      $("select").append("<option value='" + s_id + "'>" + s_id + fname + "</option>");
      $(this).closest('tr').find("td.hl").addClass('bg-warning');
      $(this).addClass('ss');
    } else if (e_group == '' && flexcheck == true) {
      $(this).removeClass('ss');
      $(this).closest('tr').find('#fCheck').prop('checked', false);
      $("select option[value='" + s_id + "']").remove();
      $(this).closest('tr').find("td.hl").removeClass('bg-warning');
    }
  });
});

修复后的HTML片段示例（修正类型与重复ID） #

<!-- 修正input类型与重复ID -->
<td><input class="transparent f_name" type="text" name="name" value="Clark"></td>
<td class="hl"><input class="transparent include" type="text" name="e_group" value=""></td>
<!-- 给每个select设置唯一ID -->
<td class="hl">
  <select name="flow_to" id="flow_to_1">
    <option value="start">start</option>
  </select>
</td>

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