附加到购物App的列表

时间：2023-01-17 18:15:45

This is my first post here. I'm creating a shopping list app and having some difficulty with adding new items to my list. My attempt was to take the value of the input and append it to my list of items. What am I doing wrong? Thanks for your help.

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

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

2 个解决方案

#1

1  

Assuming you are new to jQuery, you also have to add <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> in your <head> tags to make you jQuery work.

假设你是jQuery的新手,你还必须在你的 <中添加

Demo on 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();
    });
});

#2

0  

This works:

$(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 =" should be "addItem.click()"

“addItem.click =”应为“addItem.click()”

The other change is that I added an id to the input as it is easier.

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

You can see it all working here : codepen.io/anon/pen/EIcKv

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

#1

1  

Assuming you are new to jQuery, you also have to add <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> in your <head> tags to make you jQuery work.

假设你是jQuery的新手,你还必须在你的 <中添加

Demo on 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();
    });
});

#2

0  

This works:

$(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 =" should be "addItem.click()"

“addItem.click =”应为“addItem.click()”

The other change is that I added an id to the input as it is easier.

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

You can see it all working here : codepen.io/anon/pen/EIcKv

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

标签：

相关文章