检查输入是否包含#答案

【问题标题】：Check if inputs contain #检查输入是否包含#
【发布时间】：2017-08-04 18:13:42
【问题描述】：

在我的表单中，我有 10-15 个 inputs 和相同的 class （它是动态的，由我的 nested_forms 申请制作）。

我的表格：

<h1 id="error"></h1>
<form>

<input class="maps_input" type="text" name="map[maps_attributes][1489492164895][link]" id="maps_attributes_1489492164895_link">

<input class="maps_input" type="text" name="map[maps_attributes][7192817201001][link]" id="maps_attributes_7192817201001_link">

<input class="maps_input" type="text" name="map[maps_attributes][1701829110864][link]" id="maps_attributes_1701829110864_link">

<input class="maps_input" type="text" name="map[maps_attributes][9918271627198][link]" id="maps_attributes_9918271627198_link">

// & more

</form>

用户会将链接粘贴到这些 inputs 中，并且我正在尝试检查是否有任何链接包含 #。

I used this solution，但问题是，它只检查第一个input，而不检查其余的。

这是我尝试过的：

// 1
$( "input.maps_input" ).change(function() {
  $("input.maps_input").each(function(){
    if ($('input.maps_input').val().indexOf('#') > -1) {
      $('#error').text('Has #');
    }
  });
});

//2
$("input.maps_input").each(function(){
  $( "input.maps_input" ).change(function() {
    if ($('input.maps_input').val().indexOf('#') > -1) {
      $('#error').text('Has #');
    }
  });
});

我做错了什么？

【问题讨论】：

附注：jQuery 选择器可以链接。事实上，它是使它如此受欢迎的杀手级功能之一。
在你的 //1 首先在你的if 条件下做$(this).val()。
感谢@BhavikPatel

标签： jquery input each contains indexof

【解决方案1】：

使用focusout。

$("input.maps_input").focusout(function() {
  if ($(this).val().indexOf('#') > -1) {
        $('#error').text('Has #');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="error"></h1>
<form>
  <input class="maps_input" type="text" name="map[maps_attributes][1489492164895][link]" id="maps_attributes_1489492164895_link">
  <input class="maps_input" type="text" name="map[maps_attributes][7192817201001][link]" id="maps_attributes_7192817201001_link">
  <input class="maps_input" type="text" name="map[maps_attributes][1701829110864][link]" id="maps_attributes_1701829110864_link">
  <input class="maps_input" type="text" name="map[maps_attributes][9918271627198][link]" id="maps_attributes_9918271627198_link"> // & more
</form>

【讨论】：

【解决方案2】：

Samuel 代码可以正常工作，我想添加解释原因以便您了解问题所在，

在您的 .each 循环中，您尝试使用 $('input.maps_input').val() ，并且由于有多个对象，所以每次只使用第一个对象，所以在 jquery.each 中使用 $(this) 访问完全相同的对象总是更好您正在迭代的项目

【讨论】：

【解决方案3】：

如果我正确理解您的问题，这可能会解决您的问题

$('body').on('change', "input.maps_input", function() {
  if ($(this).val().indexOf('#') > -1) {
    $('#error').text('Has #');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="error"></h1>
<form>
  <input class="maps_input" type="text" name="map[maps_attributes][1489492164895][link]" id="maps_attributes_1489492164895_link">
  <input class="maps_input" type="text" name="map[maps_attributes][7192817201001][link]" id="maps_attributes_7192817201001_link">
  <input class="maps_input" type="text" name="map[maps_attributes][1701829110864][link]" id="maps_attributes_1701829110864_link">
  <input class="maps_input" type="text" name="map[maps_attributes][9918271627198][link]" id="maps_attributes_9918271627198_link"> // & more
</form>

【讨论】：

谢谢@Samuel :)
我会的，Stackoverflow，直到 3 分钟才让我哈哈