的jQuery在选择上的所有元素扩展方法

Question

我想添加一个方法到一组元素的使用延长从选择返回：

$(document).ready(function() { 
    $.extend($('.panel[data-refresh-url!=""][data-refresh-url]'), { 
     refresh: function (successFunc) { 


      // --- --- --- --- --- --- --- --- --- --- --- --- --- --- 
      var refreshElement = $(this).data('refresh-element'); 
      if (refreshElement == undefined) { refreshElement = $(this).find('.panel-body'); } 
      refreshElement.empty().append('<div class="spinner"><i class="fa fa-2x fa-spin fa-spinner"></i></div>'); 

      $.ajax({ 
       url: $(this).data('refresh-url'), 
       type: 'post', 
       data: null, 
       success: function (data) { 
        if (successFunc == undefined) { 
         refreshElement.empty().append(data); 
        } else { 
         refreshElement.empty().append(successFunc(data)); 
        } 
       }, 
       error: function (xhr, status, error) { 
        refreshElement.empty().append('<i class="fa fa-exclamation-triangle"></i> Could not reload panel..'); 
       } 
      }); 
      // --- --- --- --- --- --- --- --- --- --- --- --- --- --- 


     } 
    }); 
}); 

（更新：我加满的方法，只是如果是以某种方式导致问题）。

我试过$.extend和$.fn.extend，但每当我尝试拨打$('#element').refresh()，我得到refresh is not a function。

我已经改变了方法，改为使用bind('refresh')而不是所有的工作，但我需要传递一个函数，在成功刷新时执行，我的印象我不能那样做。

我真的不太熟悉jQuery - 我错过了什么？

Answer 1

我认为你完全错用了$.extend。 $.extend用于将两个对象合并在一起，显然可以用于扩展带辅助对象的一个​​主对象，如使用大括号和单个属性refresh创建的对象。

现在，在这种情况下，您正试图扩展返回值的$('.panel[data-refresh-url!=""][data-refresh-url]')，这是暂时的。即使你有它的一个变量，像这样：

var $buttons = $('.panel[data-refresh-url!=""][data-refresh-url]'); 

$.extend($buttons, { /... 

这将只需添加一个方法refresh到$buttons对象，而不是匹配元素本身。

在另一方面，如果你使用$.fn.extend，你就可以有效地创建一个jQuery插件，这将增加一个方法refresh由$返回的每一个对象，这不是你想要什么，我猜。

$(document).ready(function() { 

    var $buttons = $('.panel[data-refresh-url!=""][data-refresh-url]'); 

    for (var i = 0; i < $buttons.length; ++i) 
    { 
     $.extend($buttons[i], { 
      refresh: function (successFunc) 
      { 
       alert("Hey, I'm a button");    
      } 
     }); 
    } 

    // TESTING 

    $('.panel[data-refresh-url!=""][data-refresh-url]')[0].refresh(); 
}); 

Answer 2

你想要做的是坚持refresh方法到（特定的）一套HTMLParagraphElement。要做到这一点香草JS，你会做这样的事情：

HTMLParagraphElement.prototype.refresh = function(){ 
    alert('f'); 
} 

$('p').click(function(){ 
    this.refresh(); 
}); 

注意你怎么称呼this.refresh()，而不是$(this).refresh()。

jQuery的一个主要原因是它封装了自己内部的任何新方法 - 它不扩展现有的DOM对象。因此，$.extend不会按照您希望的方式工作。

我（认为）发生了什么事情是你通过执行$（selector）来获取对包装在jQuery对象中的元素的引用。然后你在扩展那个对象，但实际上并没有向底层对象添加任何东西。 This fiddle显示您在该范围内$ .extend'对象，但是当您调用该方法时（例如绑定click处理程序时），您将失去任何更改。

有几种不同的方式来实现你想要做的事情。最简单的方法是使用$.data来存储该函数，并通过该函数调用它。 Here's a fiddle of that。

如果您确实想要扩展HTMLParagraphElement，您可以通过在prototype对象上调用$.extend来完成。 This blog post详细解释它，但你基本上只是做下面的事情。

$.extend(HTMLParagraphElement.prototype, { 
    refresh: function() { 
     alert('Refresh called!'); 
    } 
}); 

$('.panel').find('[data-refresh-url!=""][data-refresh-url]').click(function(){ 
    this.refresh(); 
}); 

我个人认为，你不应该修改，你不拥有的对象 - 所以我想与$.data方法去。另外，jQuery UI使用了一个很好的模式，在this post on Stack中简要解释。

Answer 3

如果你只是想以一个新的方法添加到jQuery的对象，你有没有尝试过：

在这一天结束时，你可以手动的方法使用一个循环添加到每个匹配的元素只需使用$.fn.methodName=function(){}？

$.fn.newMethod=function(){ 
    console.log(this); // jQuery object 
} 
$('#element').newMethod();