1

我有这个脚本用于使用 for 循环根据列表创建卡片：

    <script>
    $(document).ready(function () {
        var mokData = [
            { category: "Material", id: '1', name: 'Brakedown of machine' },
            { category: "Material", id: '2', name: 'Brakedown of machine' },
            { category: "Tool", id: '3', name: 'Brakedown of machine' },
            { category: "Tool", id: '4', name: 'Brakedown of line' },
            { category: "Tool", id: '5', name: 'Brakedown of machine' },
            { category: "Tool", id: '6', name: 'Brakedown of line' },
            { category: "Tool", id: '7', name: 'Brakedown of machine' },
            { category: "Tool", id: '8', name: 'Brakedown of line' }
        ];
        $.each(mokData, function (i) {
            var templateString = '<article class="card"><h2>' + mokData[i].category + '</h2><p>' + mokData[i].name + '</p><p>' + mokData[i].id + '</p><button id="tes">Start</button></article>';
            $('#test12').append(templateString);
        })

        $("#test12 button").on("click", function () {
            alert();
        });

    });
</script>

现在我需要在单击按钮时获取值

4

2 回答 2

0

在这一行：

$('#test12').append(templateString);

JQuery 正在返回一个元素，您可以直接将事件侦听器添加到该元素。你可以这样做：

const element = $('#test12').append(templateString);
const thisData = mokData[i];
$(element).click(function() {
    console.log(thisData); //mock data related to the item you've just clicked
});

在上面的方法中，您不需要将任何其他数据附加到 DOM，您只需引用您已经有权访问的内容即可。

于 2021-06-02T14:14:52.010 回答
0

为此，您可以将单击处理程序附加到所有button元素，并使用对单击元素的引用（可通过传递给处理程序函数的事件对象获得）从与该按钮相关的 HTML 中检索内容。尝试这个：

jQuery($ => {
  var mokData = [{category:"Material",id:'1',name:'Brakedown of machine'},{category:"Material",id:'2',name:'Brakedown of machine'},{category:"Tool",id:'3',name:'Brakedown of machine'},{category:"Tool",id:'4',name:'Brakedown of line'},{category:"Tool",id:'5',name:'Brakedown of machine'},{category:"Tool",id:'6',name:'Brakedown of line'},{category:"Tool",id:'7',name:'Brakedown of machine'},{category:"Tool",id:'8',name:'Brakedown of line'}]
  
  // create HTML from array of objects
  let html = mokData.map(o => `<article class="card"><h2>${o.category}</h2><p>${o.name}</p><p>${o.id}</p><button>Start</button></article>`);
  $('#test12').append(html);

  // handle button click and retrieve nearest id
  $("#test12 button").on("click", e => {
    let $btn =  $(e.target);
    let id = $btn.closest('.card').find('p:eq(1)').text();
    console.log(id);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test12"></div>

请注意，我id="tes"从您创建的 HTML 中的按钮中删除了，因为这将导致重复的id值无效 - 它们在 DOM 中必须是唯一的。

于 2021-06-02T14:29:34.547 回答