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

Posted 2023-05-09

【中文标题】在 jQuery.extend() 中使用 $(this)

【英文标题】：Using $(this) from within jQuery.extend()

【发布时间】：2014-10-27 02:52:01

【问题描述】：

我正在使用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) 存储在一个变量中，但是，这意味着使代码复杂化，对吗？再也不可能在一条线上了。还是有其他解决方案？

【问题讨论】：

您调用$.extend() 的方式是，被扩展的对象是您作为第一个参数传入的对象文字。您没有在任何地方保存对该对象的引用，因此即使对 $.extend() 的调用“有效”，您也无法访问结果。 edit 没关系我很密集或疯狂 :)

@Pointy 我不确定我是否明白你的意思，但我不需要访问结果；它们被用作$(.ajaxify).ajaxForm 的选项。

@Pointy：我认为$.extend返回了扩展对象。

究竟是什么“不起作用”？我不明白这与$(this) 有什么关系。

@FelixKling 好点。我也会将它添加到问题中，但不起作用的是：$.extend 的结果只是第一个对象（文字）； .data() 调用中的任何内容都没有扩展。

【参考方案1】：

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

是的，尽管this 从未提及该元素。它只在 jQuery 调用的回调函数内部起作用，但是您使用它来构建 argument 到 ajaxForm 调用。 this 将引用任何 the this context currently refers to。

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

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

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

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

对于适用于所选集合中的多个表单的 sn-p，您可以使用 .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')));
);

【讨论】：

这是否适用于一页上的多个表单？ .data() 函数如何知道哪个 .ajaxify 当前正在“ajaxFormed”？

它没有，不；我以为你的页面上只有一个表单。

这行得通，非常感谢。遗憾的是，虽然使用 oneliner 是不可能的。