Question

我有一个任务列表，我想在列表中的每个项目上添加“隐藏按钮”。我有一个，每次你点击它，它隐藏整个列表。我希望能够为每个项目设置一个按钮，并且只有在单击时才隐藏某个项目。我有小提琴：https://jsfiddle.net/9cp9twfh/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="asana.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <title>Asana</title>
</head>
<body>

  <div class="topnav" id="myTopnav">
  </div>


  <button class="button">Hide Task</button>


  <div class="task-list"></div>

  <script src="asana.js"></script>

</body>
</html>


$(document).ready(function(){
  $.ajax({
    method: 'GET',
    url: 'https://app.asana.com/api/1.0/projects/507623085822462/tasks',
    headers: {
      'Authorization': 'Bearer 0/0c60e78596a717c771c04c1c35b0a451'
    },
    success: function(result) {
      $('.card').find('.taskname').html(result.data.name);
      showTaskList(result.data);
      }
    });
  });

  $(document).ready(function() {
    $('button').click(function() {
      $('.task-list').stop(true).toggle('slow');
      $('.button').text(function(i, t) {
        return t == 'Show Task' ? 'Hide Task' : 'Show Task';
      });
    });
  });

  var showTaskList = function(taskList) {
    for(var i = 0; i < taskList.length; i++) {
      showTask(taskList[i]);
    }
  };

  var showTask = function(taskData){
    var taskList = $('.task-list');
    var card = $('<div></div>').addClass('card');
    var taskName = $('<div></div>').addClass('taskname');

    taskName.html(taskData.name);
    card.append(taskName);
    taskList.append(card);
  };

Answer 1

var showTask = function(taskData){
  ...
  card.append(taskName);
  card.append("<button class='hide' type='button'>Hide</button>");
  taskList.append(card);
}

$(".task-list").on("click", "button.hide", function(){
  $(this).closest(".card").hide();
});

为列表中的每个项添加相同的按钮？

1 个答案: