在jQuery.extend(）中使用$(this）

Using $(this) from within jQuery.extend()

本文关键字：this jQuery extend      更新时间：2023-09-26

我正在使用jQuery表单插件，并希望在每个form.ajaxify上都使用该插件。所以我有这个：

$('form.ajaxify').ajaxForm(
    // the options
);

使用HTML <form class="ajaxify" ...> ... </form>。

现在，我有一些我想一直通过的选项，比如dataType:'json'。除此之外，我希望能够在form标签中添加更多选项，比如：

<form class="ajaxify" ... data-ajaxify-options='{"target":"#x"}'> ... </form>

根据.data()上的文档，这是有效的。

所以我想我应该使用jQuery.extend()。我试着这样说：

$('.ajaxify').ajaxForm(
    jQuery.extend(
        {
            dataType: 'json'
        }, 
        $(this).data('ajaxify-options')
    )
);

然而，这并不起作用：只传递文字对象，而不扩展任何内容。我假设这不起作用，因为$(this)不再引用form.ajaxify元素。这是正确的吗？通常情况下，可以将$(this)存储在一个变量中，但这意味着要使代码复杂化，对吧？这在一条线上是不可能的。或者还有其他解决方案吗？

我想这不起作用，因为$(this)不再引用form.ajaxify元素。这是正确的吗？

是的，尽管this从未提及该元素。它只在jQuery调用的回调函数内部执行，但是您正在使用它来构建ajaxForm调用的参数。this将指this上下文当前所指的任何内容。

通常情况下，可以将$(this)存储在一个变量中，但这意味着要使代码复杂化，对吧？

您可以将$('form.ajaxify')存储在一个变量中，因为$(this)没有意义，但是的，这就是它需要做的。不过，它并没有真正使代码"复杂化"：

var form = $('.ajaxify');
form.ajaxForm($.extend({
    dataType: 'json'
}, form.data('ajaxify-options')));

如果你想避免变量，你需要重复选择器，这是一种糟糕的做法。

对于适用于所选集合中多个表单的代码段，可以使用.each()将该方法应用于可能具有不同选项的每个元素，现在可以在其回调中使用this:

$('.ajaxify').each(function() {
    // caching $this=$(this) is possible as well, but not as necessary
    $(this).ajaxForm($.extend({
        dataType: 'json'
    }, $(this).data('ajaxify-options')));
});
相关文章：