使用jquery

Question

在输入字段中输入数据，然后单击“添加新”按钮，则应在列表中添加元素。在这里，帮我找出错误

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
    dataAdd.push($(this).data('#nameList'));
    console.log(data.length);
  });
});

<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

 

Answer 1

似乎您需要像这样的东西：

$(document).ready(function () {
    $("#addNew").click(function(){
        $("#nameList").append("<li>" + $("#data").val() + "</li>");
    });
});

Answer 2

我不明白你在这里做什么...

dataAdd.push($(this).data('#nameList'));

您可以使用jQuery来访问DOM元素，只需引用括号中的css-selector，例如$('css-selector')

该代码段可以达到目的：

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
    var value = $('#data').val();
    if(value) {
      dataAdd.push(value);
      $('#nameList').append('<li>' + value + '</li>');
      $('#data').val('');
    }
    console.log(dataAdd.length);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

Answer 3

这有效：

  var dataAdd = [];
  $("#addNew").click(function() {
        $('#nameList').append('<li>'+$('#data').val()+'</li>');
  });

Answer 4

您必须在li后面附加输入类型文本的值而不是按钮。

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
    dataAdd.push($('#data').val());
    $('#nameList').append('<li>'+$('#data').val()+'</li>');
    console.log(dataAdd.length);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>

Answer 5

$(document).ready(function() {
  var dataAdd = [];
  $("#addNew").click(function() {
  var htm='<li>'+$('#data').val()+'</li>';
  $("#nameList").append(htm);
  $('#data').val('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ol id="nameList">
  <li>aston</li>
  <li>baily</li>
  <li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>