时间戳

首页 > 解决方案 > 特定元素上的 Jquery .map 点击事件

javascript - 特定元素上的 Jquery .map 点击事件

问题描述

你好，我有一个这样的数组：

let Array1 = [
    {name:"try1", id:"id1", symbol:"symbol1"},
    {name:"try2", id:"id2", symbol:"symbol2"},
    {name:"try3", id:"id3", symbol:"symbol3"},
    {name:"try4", id:"id4", symbol:"symbol4"},
    {name:"try5", id:"id5", symbol:"symbol5"}
]

我想让他们每个人都成为一个按钮。我可以点击每一个。为此，我使用 .map Funnction （我不确定这是最好的选择）

Array1.map(data => $(".check").html(`<a id="${data.id}" class="btn btn-info" href="#" role="button">${data.id}</a>`))

直到现在我得到 5 个按钮。1 按钮每个对象与按钮的 id。

问题从这里开始：我试图在这个按钮上捕捉一个点击事件。我做不到。。

我试过了：

(`${data.id}`).click(e => console.log("click))

我很乐意寻求帮助或以任何其他方式获得相同的结果。谢谢！！

标签： javascriptjqueryarraysobject

解决方案

您可以简单地将forEach函数与事件委托一起用于动态添加的buttons.

您还需要使用 jQuery .append()函数来添加类中的所有按钮.check。使用.html将替换最后一个仅显示最后一个按钮。

运行下面的代码段。Clicks正在研究每一个。

let Array1 = [{
    name: "try1",
    id: "id1",
    symbol: "symbol1"
  },
  {
    name: "try2",
    id: "id2",
    symbol: "symbol2"
  },
  {
    name: "try3",
    id: "id3",
    symbol: "symbol3"
  },
  {
    name: "try4",
    id: "id4",
    symbol: "symbol4"
  },
  {
    name: "try5",
    id: "id5",
    symbol: "symbol5"
  }
]

   //Loop through the array1
Array1.forEach(function(data) {
  //Append Each button
  $(".check").append(`<a id="${data.id}" class="btn btn-info myBtn" href="#" role="button">${data.id}</a><br>`)

})
 
//Click function on buttons
$(document).on('click', '.myBtn', function() {
   //get the id
  let getId = $(this).attr('id')

  //do something

  //Console
  console.log(getId)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="check">
</div>

推荐阅读