Question

这是我的实际代码：

$.fn.menuWidth = (function(){
  return {
    show: function(a){
      this.animate({
        width: 400
      });
    },
    hide: function(a){
      return "hide";
    }
  };
}());

$("#header").menuWidth.show();

但是，我无法从节目$("#header")访问object。知道如何让它发挥作用吗？

Answer 1

您可能希望将插件定义的结构更改为类似

的结构

$.fn.menuWidth = function(options) {
  this.show = function() {
    this.animate({
      width: 400
    });
    return this; // <---- This will enable chaining
  };
  this.hide = function() {
    return "hide"; 
  };
  return this; // <--- returning this will make visible the hide and show methods.
};

console.log($("#header").menuWidth().show().hide());

执行jQuery的show和hide也是可能的，但这听起来有点像黑客。

$($("#header").menuWidth().show()).hide();

menuWidth插件返回this，它是元素的实例。将其包装到jQuery对象中将允许我们执行.hide()和.show()。

如果调用了.hide() menuWidth，则无法执行此操作，因为它不会返回元素实例。

PS：这是一个非常简单的编写插件的方法。有更好，更复杂的方法来编写插件。

＆＃13;

$.fn.menuWidth = function(options) {
  this.show = function() {
    this.animate({
      width: 400
    });
    return this;
  };
  this.hide = function() {
    return "hide";
  };
  return this;
};

console.log($("#header").menuWidth().show().hide());

＆＃13;

#header{
width: 100px;
  border: 1px solid red;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  This is a header
  </div>

＆＃13;

Answer 2

您需要将功能签名更改为menuWidth = function(action) {};，然后通过＆＃39; show＆＃39;或者＆＃39;隐藏＆＃39;致menuWidth()电话。有关此问题，请参阅https://learn.jquery.com/plugins/basic-plugin-creation/#minimizing-plugin-footprint了解jQuery的示例文档。

＆＃13;

$.fn.menuWidth = function(action) {
  if (action == 'show') {
      this.animate({
        width: 400
      });
  }
  else if (action == 'hide') {
     alert('hide');
  }

  return this;
};

$("#header").menuWidth('show');
$("#header").menuWidth('hide');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">Testing</div>

＆＃13;

来自JavaScript模式的jQuery插件

2 个答案: