如何在卡片标题和卡片文本中输入输入值

Question

我是脚本世界的新手，很抱歉我的工厂代码不好。我试图在我的“卡片”变量的“卡片标题”和“卡片文本”中显示输入值

这是代码：

<input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value="">

<input id="input2" class="form-control" type="text" placeholder="Write something else" value="">

<button class="btn btn-success" id="create">Create</button>

<script>

  $(document).ready(function(){

    $("#create").click(function(){   

      let cards = '<div class="card" style="width: 18rem;">' +

        '<div class="card-body">' + 

        '<h5 class="card-title"></h5>' +

        '<p class="card-text"></p>' +

        '<button class="btn btn-primary">Go somewhere</button>' +

        '</div>' +

        '</div>';

      $(document.body).append(cards);

    });

  });  

</script>

感谢大家的帮助！

Answer 1

您可以通过以下方式实现：$(document).ready(function() {&nbsp; &nbsp; $("#create").click(function() {&nbsp; &nbsp; &nbsp; &nbsp; let cards =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div class="card" style="width: 18rem;">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div class="card-body">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<h5 class="card-title">${$('#input1').val()}</h5>` +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `<p class="card-text">${$('#input2').val()}</p>` +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<button class="btn btn-primary">Go somewhere</button>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</div>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</div>";&nbsp; &nbsp; &nbsp; &nbsp; $(document.body).append(cards);&nbsp; &nbsp; })

Answer 2

请尝试以下操作：$(document).ready(function() {&nbsp; $("#create").click(function() {&nbsp; &nbsp; var cardtitle = $('#input1').val();&nbsp; &nbsp; var cardtext = $('#input2').val();&nbsp; &nbsp; let cards = '<div class="card" style="width: 18rem;">' +&nbsp; &nbsp; &nbsp; '<div class="card-body">' +&nbsp; &nbsp; &nbsp; '<h5 class="card-title">'+cardtitle+'</h5>' +&nbsp; &nbsp; &nbsp; '<p class="card-text">'+cardtext+'</p>' +&nbsp; &nbsp; &nbsp; '<button class="btn btn-primary">Go somewhere</button>' +&nbsp; &nbsp; &nbsp; '</div>' +&nbsp; &nbsp; &nbsp; '</div>';&nbsp; &nbsp; $(document.body).append(cards);&nbsp; });});演示$(document).ready(function() {&nbsp; $("#create").click(function() {&nbsp; &nbsp; var cardtitle = $('#input1').val();&nbsp; &nbsp; var cardtext = $('#input2').val();&nbsp; &nbsp; let cards = '<div class="card" style="width: 18rem;">' +&nbsp; &nbsp; &nbsp; '<div class="card-body">' +&nbsp; &nbsp; &nbsp; '<h5 class="card-title">'+cardtitle+'</h5>' +&nbsp; &nbsp; &nbsp; '<p class="card-text">'+cardtext+'</p>' +&nbsp; &nbsp; &nbsp; '<button class="btn btn-primary">Go somewhere</button>' +&nbsp; &nbsp; &nbsp; '</div>' +&nbsp; &nbsp; &nbsp; '</div>';&nbsp; &nbsp; $(document.body).append(cards);&nbsp; });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="input1" class="form-control form-control-lg" type="text" placeholder="Write something" value=""><input id="input2" class="form-control" type="text" placeholder="Write something else" value=""><button class="btn btn-success" id="create">Create</button>

Answer 3

$(document).ready(function(){$("#create").click(function(){&nbsp; &nbsp;let cards = '<div class="card" style="width: 18rem;">' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<div class="card-body">' +&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<h5 class="card-title">'+ $('#input1').val() +'</h5>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<p class="card-text">'+ $('#input2').val() +'</p>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<button class="btn btn-primary">Go somewhere</button>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '</div>';$(document.body).append(cards);&nbsp; &nbsp; });});&nbsp;&nbsp;