Question

我有一个PHP文件，它会在系统中输出所有订单，并将自定义属性oid（order-id）添加到所有链接。我的链接看起来像：

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

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

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

我想要做的是点击此链接时，会生成一个带有复选框的表单和一个提交按钮，其中包含正确的订单ID，以便发送.html。所以我可以将表单和订单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不同点击所需链接的事件。

您有两个选择：

使用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);
        },
    });
}

Answer 2

将jQuery对象传递给您的函数。您应该执行以下操作：

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

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

function getCompleteOrderTools(_this) {
    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);
        },
    });
}

通过将jQuery(this)传递给您的函数，您现在可以从click事件中完全访问jQuery对象。

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

2 个答案: