Question

我是JavaScript的新手，所以请耐心等待我。

我目前正在摆弄这段代码：

$("input[type = submit]").click(function(){
        $("<div>").attr("class","apples").html(itemInput.value).appendTo(".div1");
        $("<button>").appendTo(".apples");

            clearInput();
    })

基本上，当您单击“提交”时，它会添加一个按钮以及div。但它添加了比div更多的按钮。例如。按提交一次给我1个div和1个按钮（这就是我想要的），按第二次提交，给出1个div和2个按钮。按第三次提交，给我1个div和3个按钮。我按下提交的内容越多，单个div就会生成更多按钮。

我想知道如何创建1个div，并在创建后连接1个按钮。

编辑： HTML：这基本上就是整个事情。不包括<head>。

<body>
<div class = "centerAlign" >
    <div class = "div1">
        <input id="itemInput" type="text" placeholder="add to-do items " />
        <input type="submit" value="ADD"/>
    </div>
</div>  

<script>
    $("input[type = submit]").click(function(){
            $("<div>").attr("class","apples").html(itemInput.value).appendTo(".div1");

        $("<button>").appendTo(".apples");

        }
            clearInput();
    })
    function clearInput(){
    itemInput.value = "";
    }
  </script>
  </body>
 </html>

Answer 1

如果您希望按钮显示上次创建的带有类Apple的div，可能就是这样：

$("input[type = submit]").click(function(){
    $("<div>").attr("class","apples").html(itemInput.value).appendTo(".div1");
    $("<button>").appendTo($(".apples").last());

        clearInput();
    });

使用last（）函数，您将获得DOM中的最后一个元素。

我在这里创建了小提琴我希望它能帮到https://jsfiddle.net/Lyt3otrp/

祝你好运;]

Answer 2

这是因为每次点击提交按钮时，

$("<button>").appendTo(".apples");正在运行，这意味着每次点击提交按钮时都会附加一个按钮。

所以你应该检查一下你是否已经将按钮添加到了div中，如果是，那么只需忽略该行，如果没有，则运行该行。

示例：

var i=0;
$("input[type = submit]").click(function(){
            $("<div>").attr("class","apples").html(itemInput.value).appendTo(".div1");

              if(i==0){ 
                  $("<button>").appendTo(".apples");
                  i=2;
              } 

            clearInput();
})

这是一种做事方式:)祝你好运。

Answer 3

在这种情况下，您可能会遇到与ID混淆的课程。这是一件容易的事情，特别是当jQuery或CSS新手时（因为选择器非常相似）。类和ID之间的主要区别在于类可以应用于页面上的许多元素，其中ID仅适用于一个元素（并且永远不应该应用于一个页面上的多个元素）。

话虽如此，您正在向apples添加一个div类，然后在类apples的所有元素上添加一个按钮（首次点击，只有一个 - 新创建的），然后将.apples元素附加到页面。请谨慎$('.apples') 选择所有 .apples元素。因此，第二次单击时，您将追加到创建的第一个.apples元素，以及您正在创建的新元素。

要解决这种情况，请为元素添加ID（更长，更难的路线，但无论如何都不是很困难），或者更优雅的是，您可以在生成新的{{{{{ 1}}元素。由于我不确定你的最终游戏，我会添加一些虚假的功能（按钮在那里的原因）。我将使用它们删除他们所属的.apples元素，但您可以更改其功能以满足您的需求。

我们将从一些基本的HTML开始：

.apples

我认为我的<button id='add'>Add Apples</button> <input id='input'> <div id='container'></div>可能与您的#container一致，但我不确定如果没有看到您的HTML代码。无论如何，我们可以继续使用JavaScript（和jQuery）部分：

.div1

这是一个jsFiddle链接，因此您可以查看其实际操作：（注意：我在输入字段中添加了验证，您必须添加一个数字以单击添加苹果） https://jsfiddle.net/jezztutz/

发生了什么，在按钮点击（添加苹果或$('#add').click(function() { //gather input data var num = $('#input').val(); //validate input data if(num == '' || isNaN(num)) { alert("Please enter a numerical value."); $('#input').focus(); return false; } //manipulate input data $('<div>', {class:'apples'}).append( num, '<br>', $('<button>',{text:'-'}).click(function() {$(this).closest('.apples').remove(); }) ).appendTo('#container'); //clear the input field $('#input').val(''); });）上我们收集了数字输入（或者在我的情况下应该是数字输入），验证它不是实际上是空的，是一个数字（如果不是，错误输出）。然后我们动态生成#add，将该数字附加到它，附加一个水平中断，最后直接向该元素添加一个按钮（不再选择多个元素无意义）。然后我们可以将div div（带有按钮）附加到.apples div（在我的示例中），并清除输入字段以重新开始。

Answer 4

您的问题是您将按钮添加到所有＆＃34; apples＆＃34;你每次创造的。我认为这就是你要找的东西：

<body>
<div class = "centerAlign" >
    <div class = "div1">
        <input id="itemInput" type="text" placeholder="add to-do items " />
        <input type="submit" value="ADD"/>
    </div>
</div>  

<script src="js/jquery.min.js"></script>
<script>
    var counter = 0;
    $("input[type = submit]").click(function(){
        counter++;
        $("<div>").attr("class","apples num" + counter).html(itemInput.value).appendTo(".div1");
        $("<button>button" + counter + "</button>").appendTo(".num" + counter);
        clearInput();
    })

    function clearInput(){
        itemInput.value = "";
    }
</script>

同时添加按钮和div

4 个答案: