Question

我正在使用jQuery form plugin，并且希望每个form.ajaxify都使用此插件。所以我有这个：

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

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

现在，我有一些我想要传递的选项，例如dataType:'json'。除此之外，我希望能够在form标记中添加更多选项，如下所示：

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

根据the docs on .data()，这是有效的。

所以我以为我会使用jQuery.extend()。我试着这样说：

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

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

Answer 1

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

是的，虽然this从未参考过那个元素。它只在jQuery调用的回调函数内部执行，但是您使用它来构建参数到ajaxForm调用。 this将引用任何the this context currently refers to。

通常情况下，可以将$(this)存储在变量中，这会使代码复杂化，对吗？

你会将$('form.ajaxify')存储在一个变量中，因为$(this)没有意义，但是是的，它是如何完成的。它并没有真正复杂化＃34;但是代码：

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

如果你想避开变量，你需要重复选择器，这是一种不好的做法。

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

this