Question

这是我在这里的第一篇文章。我正在创建一个购物清单应用，并且在将新商品添加到我的列表时遇到了一些困难。我的尝试是获取输入的值并将其附加到我的项目列表中。我究竟做错了什么？谢谢你的帮助。

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Shopping App</title><link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
  <body background="images/image6.jpg">
    <div id="container">
      <header>
        <H1>Shopping List</H1>
      </header>
      <p>
        Add Item: <input type= "text" name="sumbitText">
        <button class="addItem">Add Item</button>
        <button class="remove">Remove</button>
      </p>
      <ul id="shoppingList">
        <li><input type="checkbox"/>Apples</li>
        <li><input type="checkbox"/>Bananas</li>
        <li><input type="checkbox"/>Grapes</li>
      </ul>
    </div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

JavaScript的：

$(document).ready(function() {
    var addItem = $('.addItem');
    var removeItem = $('.remove');

    addItem.click = $(function() {
        var toAdd = $('input[name=submitText]').val();
        $('#shoppingList').append('<li><input type="checkbox"/>' + toAdd + '</li>');
    });
});

Answer 1

假设您不熟悉jQuery，还必须在<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>标记中添加<head>以使jQuery正常工作。

Fiddle上的演示。

HTML：

<div id="container">
    <header>
         <H1>Shopping List</H1>
    </header>

    Add Item: <input id="text" type= "text" name="sumbitText">
    <button id="addItem">Add Item</button>
    <button id="remove">Remove</button>

    <ul id="shoppingList">
        <li><input type="checkbox"/>Apples</li>
        <li><input type="checkbox"/>Bananas</li>
        <li><input type="checkbox"/>Grapes</li>
    </ul>
</div>

JavaScript的：

$(document).ready(function () {
    var addItem = $('#addItem');
    var removeItem = $('#remove');
    addItem.click(function () {
        var toAdd = $('input#text').val();
        $('#shoppingList').append('<li><input type="checkbox"/>' + toAdd + '</li>');
    });
    removeItem.click(function () {
        var toRemove = $('input#text').val();
        $('li:contains('+toRemove+')').remove();
    });
});

Answer 2

这有效：

$(document).ready(function() {

    var addItem = $('.addItem');
    var removeItem = $('.remove');

  addItem.click(function() {
    var toAdd = $('#sumbitText').val();
      $('#shoppingList').append('<li><input type="checkbox"/>' + toAdd + '</li>'); 
  });
});


<!DOCTYPE html>
<html>
<head>
    <title>Shopping App</title><link rel="stylesheet" href="style.css" type="text/css" />
</head>
    <body background="images/image6.jpg">
        <div id="container">
            <header>
                <H1>Shopping List</H1>
            </header>
            <p>
                Add Item: <input type= "text" name="sumbitText" id="sumbitText">
                <button class="addItem">Add Item</button>
                <button class="remove">Remove</button>
            </p>
            <ul id="shoppingList">
              <li><input type="checkbox"/>Apples</li>
              <li><input type="checkbox"/>Bananas</li>
                <li><input type="checkbox"/>Grapes</li>
            </ul>
      </div>
    <script type="text/javascript" src="jquery.js"></script>    

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

“addItem.click =”应为“addItem.click（）”

另一个变化是我在输入中添加了一个id，因为它更容易。

你可以看到它在这里工作：codepen.io/anon/pen/EIcKv

附加到购物App的列表

2 个答案:

Fiddle上的演示。