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()方法的委托签名。还值得检查您的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中的每个 li上，并最终重复多次。您可以通过使用更紧密的静态单父元素（可能在页面加载时在DOM中使用该元素）来改善此问题，但是您的HTML并没有显示该示例。

Answer 2

如果您有多个带有加号和减号的输入，

console.log( $(this).parent().next().find("input").val() );将为您提供帮助。

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

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

您也可以在这里进行测试。.https://jsfiddle.net/nimittshah/1gvsc8rh/

使用jQuery从邻居输入元素获取值

2 个答案: