Question

让我们说 - 在页面中的任何<UL>元素上，我想定义一些行为。比如...

如果您点击<li>内的任何<ul>，则其颜色会发生变化......
如果您双击<li＆gt;，则会在最后添加新的<li> ..
和许多其他此类行为......

现在我知道一些jQuery，我可以使用它编写单独的函数来完成这些事情....

$("ul li").on ('click', function () { ... .css() .. });
$("ul li").on ('dblclick', function () { ... .append("<li>New Born Li</li>") ... });

但我真正想做的是将所有这些函数封装在单个对象（类）中，如结构。然后，我将该函数与任何元素相关联，以在该元素上启用这些功能。像这样的东西 -

$("ul").enableMySpecialULFeatures ({ 
   color: 'red',
   textToAppend: 'New Born Li' ,
   ... 
});

在<ul>上调用此功能后，所有行为都会应用于<ul>。

我的问题是 - 如何创建此enableMySpecialULFeatures类型的对象功能？想知道是否有人可以给我一个样板来让我开始...

Answer 1

像这样创建js插件： -

$.fn.enableMySpecialULFeatures = function(options) {
 var settings = $.extend({
     color: "#556b2f",
     textToAppend: 'New Born Li'
  }, options );

 return this.each(function() {
   $(this).find('li').click(function(){
     $(this).css('color',settings.color);
   });
   $(this).find('li').dblclick(function(e){
       e.preventDefault();
       $(this).append('<li>'+settings.textToAppend+'</li>');
     });
 });
};

并使用： -

$(function(){
  $('ul').enableMySpecialULFeatures({
    color:'green',
    textToAppend:"hello"
  });
});

Demo

Answer 2

然后通过在return语句中对$(this)的单个引用上使用多个事件处理程序来改进@ mohit-arora的示例：

$.fn.enableMySpecialULFeatures = function(options) {
  var settings = $.extend({
     color: "#556b2f",
     textToAppend: 'New Born Li'
  }, options );

  return this.each(function() {
    $(this).find('li').on({
      click: function(){
         $(this).css('color',settings.color);
      },
      dblclick: function(e) {
        e.preventDefault();
        $(this).append('<li>'+settings.textToAppend+'</li>');
      }
    });
 });
};

将JavaScript对象函数与HTML元素相关联

2 个答案: