javascript - 带按钮的数据表，将元素附加到列表

Question

我正在使用 jquery 的数据表插件，并且我已在数据表中添加了一个按钮。当按下按钮时，我想将元素标题添加到无序列表元素中。

在下面找到我的最小可行示例:

const results = {
  "generalInfo": [{
      "title": "title1",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer1",
      "img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
      "curreny": "$",
      "price": "64.00",
      "availability": "Usually ships in 24 hours",
    },
    {
      "title": "title2",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer2",
      "img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
      "curreny": "$",
      "price": "59.99",
      "availability": "Usually ships in 24 hours",
    }
  ]
}

//transform data set
let dataSet = results.generalInfo.map((item, i) => [
  i + 1,
  `<img src="${item.img}" alt="${item.title}" height="42" width="42">
                 <a href="<?php the_permalink();?>">
                     ${item.title}
                 </a>`,
  item.manufacturer,
  `<div>${item.currency} ${item.price}</div>`,
  item.availability,
  `<button id="addButton" type="button" onClick="${this.addToResults.bind(item)}">
                    Add
                </button>`,
  `<a class="btn btn-primary" target="_blank" role="button">
                    Buy
                </a>`
])

$('#table_id').DataTable({
  data: dataSet,
  destroy: true,
  columns: [{
      title: "#"
    },
    {
      title: "Title"
    },
    {
      title: "Manufacturer"
    },
    {
      title: "Price"
    },
    {
      title: "Availability"
    },
    {
      title: ""
    },
    {
      title: ""
    }
  ]
})

function addToResults(item) {

  $("ul").append(`<li>${item.title}</li>`);

}

<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="table_id" class="display" style="width:100%"></table>

<h1>Results:</h1>
<ul>

</ul>

当我按下按钮时，我收到一条错误消息，并且未附加文本。

有什么建议我做错了什么吗？

Answer 1

不要将项目绑定(bind)到内联 JS 处理程序(我真的不鼓励人们这样做，因为内联 JS 实在是太糟糕了)，您真正想要的只是返回 results.generalInfo 的引用。数组，以便您可以从中取出正确的项目。

在这种情况下，这应该足够了:

1. 为您的按钮分配一个类，而不是 ID(ID 必须是唯一的)，例如 <button class="addButton" ... /> .
2. 存储对相关项目的不变引用。这就像将索引存储在 data- 中一样简单属性，例如<button data-item-index="${i}" class="addButton" ... />
3. 将点击事件处理程序绑定(bind)到该类

4. 在单击事件处理程序中，从 data-item-index 检索值并使用它作为访问 results.generalInfo 中找到的原始项目的 key 。请记住data-属性始终返回 string ，因此请使用 +操作强制将其转换为整数:

   $('#table_id').on('click', 'button.addButton', function() {
     const itemIndex = +$(this).data('item-index');
     const item = results.generalInfo[itemIndex];
     $("ul").append(`<li>${item.title}</li>`);
   });
   

请参阅下面的概念验证片段:

const results = {
  "generalInfo": [{
      "title": "title1",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer1",
      "img": "https://images-na.ssl-images-test.com/images/asdfIdR/5adf1vELadfZeiMML.jpg",
      "curreny": "$",
      "price": "64.00",
      "availability": "Usually ships in 24 hours",
    },
    {
      "title": "title2",
      "permalink": "www.link.com",
      "manufacturer": "manufacturer2",
      "img": "https://images-na.ssl-images-test.com/images/I/51adfkLhadsfgACH0L.jpg",
      "curreny": "$",
      "price": "59.99",
      "availability": "Usually ships in 24 hours",
    }
  ]
}

//transform data set
let dataSet = results.generalInfo.map((item, i) => [
  i + 1,
  `<img src="${item.img}" alt="${item.title}" height="42" width="42">
                 <a href="#">
                     ${item.title}
                 </a>`,
  item.manufacturer,
  `<div>${item.currency} ${item.price}</div>`,
  item.availability,
  `<button class="addButton" type="button" data-item-index="${i}">
                    Add
                </button>`,
  `<a class="btn btn-primary" target="_blank" role="button">
                    Buy
                </a>`
]);

$('#table_id').on('click', 'button.addButton', function() {
  const item = results.generalInfo[+$(this).data('item-index')];
  $("ul").append(`<li>${item.title}</li>`);
});

$('#table_id').DataTable({
  data: dataSet,
  destroy: true,
  columns: [{
      title: "#"
    },
    {
      title: "Title"
    },
    {
      title: "Manufacturer"
    },
    {
      title: "Price"
    },
    {
      title: "Availability"
    },
    {
      title: ""
    },
    {
      title: ""
    }
  ]
});

<link href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="table_id" class="display" style="width:100%"></table>

<h1>Results:</h1>
<ul>

</ul>