Jquery 附加到购物应用程序的列表_Jquery_Html

Jquery 附加到购物应用程序的列表

jquery html

Jquery 附加到购物应用程序的列表,jquery,html,Jquery,Html,这是我在这里的第一篇文章。我正在创建一个购物列表应用程序，在向列表中添加新项目时遇到一些困难。我的尝试是获取输入值并将其附加到项目列表中。我做错了什么？谢谢你的帮助 HTML: 购物应用购物清单添加项目：添加项去除苹果香蕉葡萄 JavaScript: $(document).ready(function() { var addItem = $('.addItem'); var removeItem = $('.remove'); addItem

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

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

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

$（文档）.ready（函数（）{
变量addItem=$（'.addItem'）；
var removietem=$（'.remove'）；
addItem.click=$（函数（）{
var toAdd=$（'input[name=submitText]'）。val（）；
$（“#购物清单”）.append（“”+toAdd+”）；
});
});

假设您是jQuery新手，您还必须在

标记中添加

，以使jQuery工作

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

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

$（文档）.ready（函数（）{
var addItem=$（“#addItem”）；
var removietem=$（“#remove”）；
添加项。单击（函数（）{
var toAdd=$（'input#text'）.val（）；
$（“#购物清单”）.append（“”+toAdd+”）；
});
移除项目。单击（函数（）{
var toRemove=$（'input#text'）.val（）；
$（'li:contains（'+toRemove+'））.remove（）；
});
});

这项工作：

$(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>

$（文档）.ready（函数（）{
变量addItem=$（'.addItem'）；
var removietem=$（'.remove'）；
addItem.click（函数（）{
var toAdd=$（'#sumbitext'）.val（）；
$（“#购物清单”）.append（“”+toAdd+”）；
});
});
购物应用
购物清单

添加项目：
添加项
去除


苹果
香蕉
葡萄

“addItem.click=”应该是“addItem.click（）”

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

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

为什么你有两个身体标签

，

？我搜索了插入背景图像，遇到了这个例子：我知道这看起来很新手。我还在学习。你有更好的建议吗？我愿意接受所有反馈。非常感谢。如该示例所示，您只能有一个body标记

。我也注意到了这一点。抢手货我会改变的。非常感谢。您没有任何删除项目的事件。只是让添加项目开始工作！删除项目..这是我的下一步。再次感谢你的帮助！！