javascript - 在循环外访问循环的一项

Question

所以我有几个使用 Jquery 从数据库迭代的项目，对于每个项目，我输出一个按钮来选择该特定项目，当我单击该行的按钮时，我想将详细信息 POST 到 MVC 中的 Controller 。

$.each(data, function (i, val) {
    var item = $('<div></div>');
    item.append('<h2><a>' +val.Name+ '</a></h2>');              
    item.append('<a id="button">SELECT</a>');
    tab.append(item);
});

我有这个按钮的功能:

$('#myId').on('click', 'a#button', function () {
    alert('Name'+val.Name+'');  
    var item = { Name: val.Name };
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: "{item:" + JSON.stringify(item) + "}",
        url: "/Person/GetData"
    });
});

如果我在循环中添加该函数，它将迭代与其中的项目一样多的次数。那么我该如何处理这个问题，以便在按下“选择”按钮后发送姓名？

Answer 1

使用DOM遍历方法获取想要的元素提取文本传递给$.ajax()

由于 HTML 中的标识符必须是唯一的，因此使用 CSS 类选择器来定位它们

$.each(data, function (i, val) {
    var item = $('<div></div>');
    item.append('<h2><a>' + val.Name + '</a></h2>');
    item.append('<a class="button">SELECT</a>');
    tab.append(item);
});

在事件处理程序中，使用 .prev()以 sibling <H2> 为目标元素

$('#myId').on('click', 'a.button', function () {
    var item = {
        Name: $(this).prev('h2').find('a').text()
    };
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: {
            item: item
        },
        url: '@Url.Action("GetData", "Person")' //Note: this will not work in separate JS file
    });
});