Question

我想动态填充一个数组，并从所选项目中获取所有值。例如，我有两个对象组成的数组：

var allAdds = new Object();

var first = new Object();
first.ID = 1;
first.Location = "London";
first.Title = "some lovely title";
first.Description = "nice and long description";
first.DueDate = "2020-01-25";

var second = new Object();
second.ID = 2;
second.Location = "Manchester";
second.Title = "some lovely title";
second.Description = "nice and long description";
second.DueDate = "2020-01-23";

allAdds = [first, second];
var myString = JSON.stringify(allAdds);
var data = jQuery.parseJSON(myString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
    <div class="list-group" id="myAddList"></div>
    <button type="button" id="add" class="btn btn-primary btn-block"> add</button>
  </div>

我设法将它们动态添加到我的html中：

$.each(data, function(key, value) {
  $('#myAddList').append(
    '<div>' +
    '<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">' +
    '<div class="d-flex w-100 justify-content-between">' +
    '<h5 class="mb-1">' + value.Title + '</h5>' +
    '<small>' + value.DueDate + '</small>' +
    '</div>' +
    '<p class="mb-1">' + value.Description + '</p>' +
    '<small>' + value.Location + '</small>' +
    '</a></div>'
  );
});

但是，我要实现的是提取选定的对象。即，如果我按第一个项目，则希望将其作为对象进行进一步的操作。

如何获取所选项目：

$(".list-group div").click(function(e) {
    $(".list-group .list-group-item").removeClass("active");
    $(e.target).addClass("active");

编辑

我想拥有的东西：

var selectedItem = new Object();
selectedItem.ID = ???;
selectedItem.Title = ???;
selectedItem.Location = ???;

，依此类推。有什么办法可以实现？

Answer 1

我假设变量data是全局定义的，如果不临时将其存储到任何变量中，则可以创建一个“获取函数”

  function getDataById(id){
      var __found = jQuery.grep(data, function( n, i ) {return id == n.id;});       
      return __found[0];
  }

在“生成的标记”中，添加一个包含ID的数据属性

 '<div data-id="'+value.ID+'" > ... </div>'

并且在点击处理程序中，您可以立即使用该功能

$(".list-group div").click(function(e) {
   var selectedItem = getDataById($(this).attr('data-id'));
   console.log(selectedItem.Title);
   ...

虽然不知道我是否正确理解了您的问题

Answer 2

在小提琴链接上访问，我已经添加了一个样本

$（“。list-group div”）。click（function（e）{

$(".list-group .list-group-item").removeClass("active");
$(e.target).addClass("active");
console.log($(this).attr('data-id'));
console.log($(this).attr('data-title'));
console.log($(this).attr('data-location'));

}）;

https://jsfiddle.net/prashantchaurasia/c9251udL/1/

获取所选项目

编辑

2 个答案: