Question

我正在通过input field事件从.onclick捕获值，在该事件中，我使用附加信息创建了一个新的div。我正在尝试在新创建的行中的输入旁边添加3个<button>标记，但是似乎无法弄清楚如何正确地将它们与.addClass一起添加，以便可以将它们设置为好吧。

我尝试了几种添加<button> div的方法，但是无法解决问题。一切正常，但我需要在按钮上添加一个新类。

$("#search-submit").on("click", function() {
  // variable for using the search functionality and adding it to the itinerary for the first day
  var itineraryInput = $("#search").val();
  var row = $("<div>");
  row.addClass("attraction");
  row.append("<p>" + itineraryInput + "</p>");
  row.append("<button>" + "<button>" + "<button>");
  $("#first").prepend(row);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
  <div class="col">
    <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
    <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
  </div>
</div>

<div class="trans_container">
  <div id="trans_first"></div>
  <div id="trans_second"></div>
</div>

<div class="acontainer">
  <div id="first"></div>
  <div id="second"></div>
  <div id="clear"></div>
</div>

Answer 1

    var $button = $("button")

// Adding event listener for when user clicks the add-bttn
$button.on("click", function() {

// variable for using the search functionality and adding it to the itinerary for the first day
var itineraryInput = ($("#search").val() === "") ? " " : $("#search").val();

console.log(itineraryInput);

var row = $("<div>");
    row.addClass("attraction");
    row.append("<p>" + $('div.attraction').length + "</p>");
    row.append("<button>" + itineraryInput + "</button>");

//providing the last thing I tried to do to make it work.
// var attButton = $("<button>");
//     attButton.addClass("attButton");
//     attButton.append("<button>" );

    $("#first").prepend(row);
});

Answer 2

我们已经为按钮类创建了数组，然后使用addClass函数将这些类添加到按钮中。试用我们的脚本后，请分享您的反馈意见。

$("#search-submit").on("click", function() {

  // variable for using the search functionality and adding it to the itinerary for the first day
  var itineraryInput = $("#search").val();

  console.log(itineraryInput);

  var classes = ["classA", "classB", "classC"]; // array of classes for button
  var row = $("<div>");
  row.addClass("attraction");
  row.append("<p>" + itineraryInput + "</p>");
  for (var i = 0; i < 3; i++) {
    $("<button>" + itineraryInput + "</button>").addClass(classes[i]).appendTo(row); // added class to button
  }

  // var attButton = $("<button>");
  //     attButton.addClass("attButton");
  //     attButton.append("<button>" );

  $("#first").prepend(row);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" style="height: 100%"></div>
<div class="row mb-2">
  <div class="col">
    <input type="text" class="form-control" id="search" placeholder="Search for an attraction...">
    <button id="search-submit" class="btn btn-lg pull-right">Add To Your Itinerary!</button>
  </div>
</div>

<div class="trans_container">
  <div id="trans_first"></div>
  <div id="trans_second"></div>
</div>

<div class="acontainer">
  <div id="first"></div>
  <div id="second"></div>
  <div id="clear"></div>
</div>

如何动态添加按钮

2 个答案: