im 尝试制作一个将 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);
}
});
}
});
});
是的,常见的解决方案是声明一个 var 示例 self = this 并使用该变量
var self = this;
$.ajax({
url: 'http://'+document.domain+'/klanten/updateaddress.php',
type: 'post',
data: poststring,
success: function(result) {
changeshit(result, self);
}
});
}
这样,此上下文将保存在变量中。
尝试以下操作:
在$(".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);
}
});
也就是说,如果我正确理解了您要做什么
如果您只是添加:
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
});
有
几种方法可以实现此目的
1)如果你阅读文档(jQuery.ajax),你会发现你可以为ajax方法提供一个上下文
。上下文类型:普通对象此对象将成为所有与 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)
。