0

我试图制作一个脚本，将 P 行更改为输入字段，让用户编辑它们，然后在通过 ajax 签入外部 php 文档后恢复为 p 行。然而问题似乎是我不能在 ajax 部分使用它，它破坏了代码。我该如何解决？我需要发布 HTML 吗？

$(document).ready(function () {

    function changeshit(result, that) {
        if (result == "success") {

            $(that).closest('div').find('input').each(function () {


                var el_naam = $(that).attr("name");
                var el_id = $(that).attr("id");
                var el_content = $(that).attr("value");

                $(that).replaceWith("<p name='" + el_naam + "' id='" + el_id + "'>" + el_content + "</p>");

            });


            $(".editlink").replaceWith("<a href=\"#_\" class=\"editlink\" name=\"edit\" id=\"" + editid + "\">Bewerken</a>");
        } else {

            alert(result);
        }
    }



    $(".editinv").on('click', 'a', function () {

        var editid = $(this).attr("id");
        var edit_or_text = $(this).attr("name");

        if (edit_or_text == "edit") {


            $(this).closest('div').find('p').each(function () {

                var el_naam = $(this).attr("name");
                var el_id = $(this).attr("id");
                var el_content = $(this).text();

                $(this).replaceWith("<input type='text' name='" + el_naam + "' id='" + el_id + "' value='" + el_content + "' />");

            });


            $(".editlink").replaceWith("<a href=\"#_\" class=\"editlink\" name=\"done\" id=\"" + editid + "\">Klaar</a>");

        } else if (edit_or_text == "done") {


            var poststring = "";
            $(this).closest('div').find('input').each(function () {

                var el_naam = $(this).attr("name");
                var el_id = $(this).attr("id");
                var el_content = $(this).attr("value");

                poststring = poststring + '' + el_naam + '=' + el_content + '&';

            });

            poststring = poststring + 'end=end'

            $.ajax({
                url: 'http://' + document.domain + '/klanten/updateaddress.php',
                type: 'post',
                data: poststring,
                success: function (result, this) {

                    changeshit(result, this);


                }
            });
        }

    });
});
4

4 回答 4

1

如果您只是添加：

context: this

到$.ajax选项然后success处理程序将自动以正确的值调用this，因此您不需要该that参数。

然后，您也不再需要围绕success回调的额外函数包装器，因此您可以使用：

$.ajax({
    url: 'http://' + document.domain + '/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    context: this,       // propagate "this"
    success: changeshit  // just pass the func ref
});
于 2013-10-25T09:35:13.227 回答
1

是的，常见的解决方案是声明一个 var 示例 self = this 并使用该变量

 var self = this;
 $.ajax({
            url: 'http://'+document.domain+'/klanten/updateaddress.php',
            type: 'post',
            data: poststring,
            success: function(result) {   

            changeshit(result, self);


            }
        });
    }

这样，this 上下文就保存在变量中。

于 2013-10-25T09:35:37.737 回答
1

尝试以下操作：

就在$(".editinv").on('click', 'a', function () {添加下方

$(".editinv").on('click', 'a', function () {
    var element = this;

然后将其更改为：

$.ajax({
    url: 'http://' + document.domain + '/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    success: function (result) {
        changeshit(result, element);
    }
});

那就是如果我正确理解你想要做什么

于 2013-10-25T09:32:56.287 回答
1

有几种方法可以实现这一目标

1）如果您阅读文档（jQuery.ajax），您会看到您可以为 ajax 方法提供上下文

context 类型：PlainObject该对象将成为所有 Ajax 相关回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的 ajax 设置（$.ajaxSettings 与传递给 $.ajax 的设置合并）。

$.ajax({
    url: 'http://'+document.domain+'/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    context: this,
    success: function(result) {   
        // the context sent above would become the context of this function when called by jquery
        changeshit(result, this);
    }
});

以这种方式使用它，您甚至可以像下面的代码一样进行操作

function changeshit (result) {
    var $that = $(this);
    if (result == "success") {

            $that.closest('div')... // cool ha ?
};
$.ajax({
    url: 'http://'+document.domain+'/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    context: this,
    success: changeshit
});

2）您可以利用闭包（在此处阅读更多信息或搜索谷歌），因此您的代码将变为

var context = this;
$.ajax({
    url: 'http://'+document.domain+'/klanten/updateaddress.php',
    type: 'post',
    data: poststring,
    success: function(result) {   
        // here you can use any variable you declared before the call
        changeshit(result, context);
    }
});

作为旁注，我建议您使用变量/对象缓存，因此var $this = $(this)在函数顶部声明并通过您的函数使用它，而不是$(this)每次需要时都调用它。

于 2013-10-25T09:41:39.367 回答