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

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() {

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

        let cards =

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

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

            `<h5 class="card-title">${$('#input1').val()}</h5>` +

            `<p class="card-text">${$('#input2').val()}</p>` +

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

            "</div>" +

            "</div>";

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

    })

Answer 2

请尝试以下操作：

$(document).ready(function() {

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

    var cardtitle = $('#input1').val();

    var cardtext = $('#input2').val();

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

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

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

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

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

      '</div>' +

      '</div>';

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

  });

});

演示

$(document).ready(function() {

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

    var cardtitle = $('#input1').val();

    var cardtext = $('#input2').val();

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

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

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

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

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

      '</div>' +

      '</div>';

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

  });

});

<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(){   

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

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

            '<h5 class="card-title">'+ $('#input1').val() +'</h5>' +

            '<p class="card-text">'+ $('#input2').val() +'</p>' +

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

            '</div>' +

            '</div>';

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

    });

});