Question

我是Javascrip html和css的新手。好吧，我想练习一下。所以我创建了一个按钮。当我点击它时，屏幕上出现一个新的小卡片。这完全没问题。那么现在我正在尝试执行一项功能，当我点击创建的卡时，它会打开两个带有保存按钮和取消按钮的输入字段。我知道如何编程保存和取消按钮，但我不知道如何通过单击创建的卡在创建的卡中创建它们。你们中的某些人是否知道如何用Js做到这一点？我真的不知道我怎么能用js做到这一点。这是我的代码：

<button class="plus">
    <div class="item">
        <p>+</p>
    </div>
    <form name="theform">
        <input class="input-feld" type="text"><br>
        <input class="input-feld "type="text"><br>
        <input type="button" onClick="new Person()" value="Speichern">
        <input type="button" onClick="new Person()" value="Abbrechen">
    </form>
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

JS：

$(document).ready(function () {
    $("button.plus").on("click", function () {
        $("div:last").after("<div class=item><p>Title</p></div>");
    });
});

Answer 1

你当前的代码看起来搞砸了，因为你在按钮标签里面有html形式，单独按钮html，你的卡html。

以下是一个工作示例。

理念是

有一个单独的按钮，点击后会添加卡片
拥有一张卡片原型，您可以clone添加到身体以创建新卡片
每张卡片内都有一个隐藏的表格，只有在您点击该卡片时才会显示
使用Event Delegation触发动态添加的卡上的点击事件。

＆＃13;

$(document).ready(function () {
    $("button.plus").on("click", function () {
        var newCard = $('#cardPrototype').clone(true); // clone the card html
        $(newCard).css('display','block').removeAttr('id');
        $('#newCardHolder').append(newCard);
    });
    
    $('body').on('click','.card',function(){ // event delegation syntax
      $(this).find('form').show();    
    });
});

＆＃13;

.card{
  background-color:yellow;
  padding:5px;
  width:200px;
  margin-bottom:20px;
  height:150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="plus">
  <div class="item">
    <p>+</p>
  </div>
</button>

<div id="newCardHolder">


</div>

<div id="cardPrototype" class="card" style="display:none;">
  <span> This is a Random Card</span>
  <form name="theform" style="display:none;">
    <input class="input-feld" type="text">
    <br>
    <input class="input-feld " type="text">
    <br>
    <input type="button" onClick="new Person()" value="Speichern">
    <input type="button" onClick="new Person()" value="Abbrechen">
  </form>
</div>

＆＃13;

希望这很有用。

如何通过点击创建的卡片在卡片中创建输入字段？

1 个答案: