javascript - PHP jQuery HTML - 获取自定义 HTML 属性

Question

我有一个 PHP 文件，它列出系统中的所有订单，并将自定义属性 oid (order-id) 添加到所有链接。我的链接如下所示:

<a href='#' class='completeOrder' oid='$order_id'>$status</a>

这给出了正确的 html，当我检查元素时我得到了这个

<a href='#' class='completeOrder' oid='8'>Un-completed</a>

我想做的是，当单击此链接时，生成一个带有复选框的表单和一个提交按钮，其中要发送的 html 中包含正确的订单 ID。因此我可以将表单和订单 ID 发送到另一个 PHP 文件进行处理(在本例中更新订单状态)。

我正在使用 jQuery AJAX 调用来生成带有复选框的表单，但是当我尝试提醒订单 ID 以检查 jQuery 是否正确获取了 oid 时，它告诉我其未定义...:

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();
    getCompleteOrderTools();

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools() {
    var o_id = $(this).attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}

Answer 1

您的主要问题是您正在引用 this在错误的上下文中如this在您的函数中可用 getCompleteOrderTools与 this 不同您想要引用所需链接的点击事件。

您有 2 个选择:

要么使用jQuery(this).attr('oid');

或者

使用jquery data属性

<a href='#' class='completeOrder' data-oid='$order_id'>$status</a>

jQuery(this).data('oid');

所以你的代码是 .attr看起来像:

$("body").delegate(".completeOrder", "click", function(event) {
    event.preventDefault();

    var myThis = $(this);//This is the 'this' corresponding to the link clicked

    getCompleteOrderTools(myThis);

    $(".content").toggleClass("hidden");
    $('div.hidden').fadeIn(800).removeClass('hidden');
    $("#notifications-drop").toggleClass('hidden');
});

function getCompleteOrderTools(myThis) {

    var o_id = myThis.attr('oid');
    alert(o_id);

    $.ajax({
        url:   "action.php",
        method: "POST",
        data: {
            getCompleteOrderTools: 1,
            orderId: o_id
        },
        success: function(data) {
            $(".row").append(data);
        },
    });
}