Question

在我的表单中，我有10-15 input个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＆amp;我试图检查是否有任何链接包含＃。

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

这就是我的尝试：

// 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 #');
    }
  });
});

我做错了什么？

Answer 1

塞缪尔代码将起作用，我想补充解释为什么这样你才能理解错误，

在你的.each循环中，你试图使用它来访问该值 $（'input.maps_input'）。val（），并且因为有多个对象所以每次只使用第一个，所以在jquery.each中使用$（this）来访问完全相同的更好你正在迭代的项目

Answer 2

如果我理解你的问题，这可能会解决你的问题

$('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>

Answer 3

使用focusout。

＆＃13;

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

＆＃13;

<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>

＆＃13;

检查输入是否包含＃

3 个答案: