javascript - 使用 jQuery 从相邻输入元素获取值

Question

我试图在单击标志时获取 INPUT 字段的当前值。

HTML:

<li>
<ul>        
<li class="name">Name:</li>
<li><a spc_action="minus" class="ignite_form_counter fas fa-minus-circle"></a></li>
<li><input type="text" name="count_cat_2_x" value="0"></li>
<li><a spc_action="plus" class="ignite_form_counter fas fa-plus-circle"></a></li>
</ul>
</li>

JS:

$('li').delegate('.ignite_form_counter', 'click', function(){       
    console.log( $(this).parent().parent('li').closest('input').val() );    
    return false;
});

我已经尝试过上面的方法，但它不起作用。

我最好不要使用 closest，因为我想 100% 确定我得到了正确的值。

有什么建议可以实现吗？

Answer 1

首先，delegate 已被弃用。您应该改用 on() 方法的委托(delegate)签名。检查您的 jQuery 版本是否是最新的也是值得的。如果您需要旧版 IE 支持，您最好使用 3.3.1 或 1.12.1。其次，closest() 用于向上 DOM，而不是向下。因此，您可以将它与 find() 调用结合起来以执行您需要的操作:

$(document).on('click', '.ignite_form_counter', function(e) {
  e.preventDefault();
  var value = $(this).closest('ul').find('input').val()
  console.log(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <ul>
      <li class="name">Name:</li>
      <li>
        <a spc_action="minus" class="ignite_form_counter fas fa-minus-circle">-</a>
      </li>
      <li><input type="text" name="count_cat_2_x" value="0"></li>
      <li>
        <a spc_action="plus" class="ignite_form_counter fas fa-plus-circle">+</a>
      </li>
    </ul>
  </li>
</ul>

请注意，on() 调用是在 document 上进行的。像以前一样使用 li 会将事件附加到 DOM 中的 every li 并最终重复多次。您可以通过使用更接近的静态单父元素来改进这一点，该元素在页面加载时在 DOM 中可用，但您的 HTML 并未显示该元素以提供示例。