javascript - 只是尝试检查该值是否存在于数组中

Question

我正在尝试用 jQuery 编写一个函数。

var arr1 = ["Jcob", "Pete", "Fin", "John"];
var str = $("#fname").val();
if (jQuery.inArray(str, arr1))
  $("#lname").text("Bob");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="fname" name="fname">
<input type="text" id="lname" name="lname">

请检查我的 fiddle here

它将做什么用户将在第一个输入框中给出值，jQuery 函数将检查该值是否存在于该数组中，它将用给定的文本填充第二个输入框。

Answer 1

三件事:

1. 您需要向第一个输入添加一个事件监听器，以便在有人输入内容时持续检查。
2. 在 DOM 中选择元素之前，请确保 DOM 已准备就绪。
3. 这里根本不需要 jQuery。与大多数事情一样，无需 jQuery 即可轻松完成。

const names = [ "Jcob", "Pete", "Fin", "John" ];
document.addEventListener('DOMContentLoaded', function() {
  const fname = document.getElementById('fname');
  const lname = document.getElementById('lname');
  fname.addEventListener('input', function(event) {
    lname.value = names.includes(fname.value) ? 'Bob' : '';
  });
});

<input type="text" id="fname" name="fname">
<input type="text" id="lname" name="lname">

如果您坚持使用 jQuery(我强烈建议您在精通 native DOM API 之前不要这样做):

const names = [ "Jcob", "Pete", "Fin", "John" ];
$(document).ready(function() {
  const $fname = $('#fname');
  const $lname = $('#lname');
  $fname.on('input', function(event) {
    if ($.inArray($fname.val(), names) > -1) {
      $lname.val('Bob');
    } else {
      $lname.val('');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="fname" name="fname">
<input type="text" id="lname" name="lname">