如何将单击的相同按钮添加到列表中？

Question

我创建了在模态中显示特定 gif 的按钮，并且在模态中有一个添加到列表按钮。我创建了一个单击函数，该函数创建了一个包含已完成和已删除按钮的新行。在列表项下，我希望单击的相同按钮具有相同的功能。因此，如果我单击胸部按钮，那么相同的胸部按钮将出现相同的模式显示。任何帮助都会很棒，这是我的代码笔：

https://codepen.io/anon/pen/ZQpRVW

HTML 表格

<div class="col-md-7 col-md-offset-1">
    <div class="addedList">
        <table class="table table-striped table-bordered">
        <tr>
            <th colspan="3"><h2 id="titleName"></h2></th>  
        </tr>
        <tr>
            <td>List Items</td>
          <td class="complete">Completed</td>
          <td class="delete">Delete</td>
        </tr>
       </table>
    </div>
   </div>

jQuery 函数

$("#add").on("click", function() {
      var newRow = $("<tr>");
      var exerciseTd = $("<td>").append();
      var completeBtn = $("<button>").addClass("btn btn-info").append("Completed");
      var completeTd = $("<td>").append(completeBtn);
      var deleteBtn = $("<button>").addClass("btn btn-danger").append("Delete");
      var deleteTd = $("<td>").append(deleteBtn);

    //Appending new row and delete button to table body
    newRow.append(exerciseTd).append(completeTd).append(deleteTd);
    $("tbody").append(newRow);
    });

Answer 1

我不熟悉引导程序，但对于删除 btn 点击，您可以使用类似

$('.table').on('click' , '.btn.btn-danger' , function(){
  $("#myModal").modal("show");
});

Working Example

直到您的 cmets，您可以通过使用 data 属性将单击按钮的名称传递给您的模态.. 例如.. 如果您单击 Chest 尝试将 data-listitem="Chest" 设置为您的模态和在#add click 事件中使用 .attr('data-listitem') 获取此数据，然后像其他按钮一样附加它

$(document).ready(function(){


    $("#chest").on("click", function() {
       $("h4").html("Bench Press");
        $("p").html("<img id='yo' src='https://45.media.tumblr.com/860edb05e3f8b0bf9b4313a819e87699/tumblr_mi2ud72e931qet17vo1_400.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#legs").on("click", function() {
       $("h4").html("Squat");
        $("p").html("<img id='yo' src='http://i.imgur.com/89ZQmzf.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#shld").on("click", function() {
       $("h4").html("Shoulder Press");
        $("p").html("<img id='yo' src='http://i0.wp.com/thegaysian.com/wp-content/uploads/2015/07/b001.gif?resize=420%2C420'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#bi").on("click", function() {
       $("h4").html("Incline Dumbbell Bicep Curl");
        $("p").html("<img id='yo' src='http://cdn.makeagif.com/media/8-05-2015/OZGZTL.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });

    $("#tri").on("click", function() {
       $("h4").html("Tricep Dips");
        $("p").html("<img id='yo' src='https://45.media.tumblr.com/a731186fc986346bf6e2b96225e5f1f3/tumblr_njhocrvEo91six5o1o1_500.gif'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });


    $("#abs").on("click", function() {
       $("h4").html("Standing Ab Twist");
        $("p").html("<img id='yo' src='https://s-media-cache-ak0.pinimg.com/originals/b2/9c/0e/b29c0e0eb56db9cb3451625c13a00766.jpg'>");
        $("#myModal").attr('data-listitem' , $(this).attr('id')).modal("show");
    });




    $("#add").on("click", function() {
      var listitemdata = $(this).closest('.modal').attr('data-listitem');
      var newRow = $("<tr>");
      var exerciseTd = $("<td>").addClass("btn btn-primary").append(listitemdata);
      var completeBtn = $("<button>").addClass("btn btn-info").append("Completed");
      var completeTd = $("<td>").append(completeBtn);
      var deleteBtn = $("<button>").addClass("btn btn-danger").append("Delete");
      var deleteTd = $("<td>").append(deleteBtn);

    //Appending new row and delete button to table body
    newRow.append(exerciseTd).append(completeTd).append(deleteTd);
    $("tbody").append(newRow);
    });
$('.table').on('click' , '.btn.btn-primary' , function(){
  $("#myModal").modal("show");
});
});

Working Demo

注意： $(this).attr('id') 会给你元素的 id 你可以把它改成 $(this).text() 给你的内容这个 元素

Answer 2

这并不理想，但它可以工作（请参阅 cmets 进行解释）https://codepen.io/anon/pen/NxRzJQ
基本上，它将所选练习的 btn ID 和 btn 文本放入一个变量中，然后将这些 attr 添加到按钮中。然后该按钮单击相关的练习。

 // globals 
 var currentBtn
 var currentBtnTxt

 //assign the var on each click
  $("#chest").on("click", function() {
  currentBtn = $(this).attr('id')
  currentBtnTxt = $(this).text() .. .

  //adds the button

  var modalBtn = $("<button>").addClass("btn btn-info exbtn ").attr("data-type", currentBtn).append(currentBtnTxt)
  var exerciseTd = $("<td>").append(modalBtn);
  //delete row
 $('.table').on('click' , '.btn.btn-danger' , function(){
   $(this).closest('tr').remove()
});
 //show modal from list btn
  $('.table').on('click' , '.exbtn' , function(){
   var type = $(this).data('type')
    //hide the add to list button
     $("#add").hide()
    $("#"+type).click()
});

另外，我在模式中添加了一个“取消”按钮

  //this will reset the add to list button when the modal closes
     $("#myModal").on('hide.bs.modal', function(){
    $("#add").show()
 })