Question

我已经查过并尝试了，但是没有用。如果用户在输入字段中提交了a，那么它应该提醒it works，但是由于某种原因它不起作用。

我在做什么错，我该如何解决？

$(function() {
  var $list, $newItemForm;
  $list = $('ul');
  $newItemForm = $("newItemForm");

  $newItemForm.on('submit', function(e) {
    e.preventDefault();
    // var text = $('input:text').val();
    var text = $('itemField').val();
    console.log(text);
    $list.append('<li>' + text + '</li>');
    // $('input:text').val('');

    if (text == "a") {
      alert("it works");
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="newItemForm">
  <input type="text" id="itemField" placeholder="item" />
  <input type="submit" id="add" value="add" />
</form>

Answer 1

在引用格式（#）和变量中的输入值（$("newItemForm")）时，您忘记了选择器中的$('itemField').val()前缀：

$(function() {
  var $list, $newItemForm;
  $list = $('ul');
  $newItemForm = $("#newItemForm");

  $newItemForm.on('submit', function (e) {
      e.preventDefault();
      // var text = $('input:text').val();
      var text = $('#itemField').val(); 
      console.log(text);
      $list.append('<li>' + text + '</li>');
      // $('input:text').val('');

      if(text == "a") {
          alert("it works");
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="newItemForm">
    <input type="text" id="itemField" placeholder="item"/>
    <input type="submit" id="add" value="add"/>
</form>

Answer 2

我认为问题出在“ newItemForm”和“ itemField”的选择器上。

在jQuery中，当您想按ID选择元素时，需要在＃字符前加上

。

代码应如下：

$(function() {
var $list, $newItemForm;
$list = $('ul');
$newItemForm = $("#newItemForm"); // Remember to use # to select by ID.

$newItemForm.on('submit', function (e) {
    e.preventDefault();
    // Get value from item field.
    var text = $('#itemField').val(); // Use # here as well.
    // Clear the item field.
    $('#itemField').val('');
    console.log(text);
    $list.append('<li>' + text + '</li>');

    if(text == "a") {
        alert("it works");
    }
});

});

如果您不使用＃，则jQuery会期望以下元素类型，例如ul或span等。如果要按班级选择，则需要在前面加一个。在类名前面，例如“ .classname”。

我希望这会有所帮助。

为什么不能读入输入值并显示警报？

2 个答案: