Question

我创建了一个jquery插件。见下文。

==

我试着在下面使用它。

$.fn.changeColor = function(optionOrAction){
  if (typeof optionOrAction == 'object'){
    $.fn.changeColor.option = $.extend({}, $.fn.changeColor.option, optionOrAction);
  }

  if (typeof optionOrAction == 'object' || optionOrAction == ''){
    $(this).css('border', '3px solid red');
  }

  if (optionOrAction == 'showOption'){
    alert($.fn.changeColor.option.showColor);
  }
}

$.fn.changeColor.option = {};

对于test1插件，我将red设置为showColor选项。对于test2插件，我将蓝色设置为showColor选项。

当我们调用test1和test2的方法时，test1应为红色，test2应为蓝色。

目前，这两个插件显示蓝色警报。

问题是jquery插件无法维护多次使用的数据。那么，如何将其更改为插件中的主数据？

Answer 1

要创建一个简单干净的jQuery插件，您可以使用jQuery boilerplate模板。

您可以参考以下基本模板来启动一个简单的插件。它对你有用： https://github.com/jquery-boilerplate/jquery-patterns/blob/master/patterns/jquery.basic.plugin-boilerplate.js

但是我已经修改了你的插件结构以维持状态，你可以查看下面的内容：

＆＃13;

$.fn.changeColor = function(optionOrAction){

	var $this = $(this).eq(0);
        var obj = $this.data("changeColor");
        if(!obj) obj = $.fn.changeColor.option;
     
  	if (typeof optionOrAction == 'object'){
            obj = $.extend({}, obj, optionOrAction);
            $this.data("changeColor", obj);
  	}
  	if (typeof optionOrAction == 'object' || optionOrAction == ''){
    	    $this.css('border', '3px solid red');
  	}
  	if (optionOrAction == 'showOption'){
    	    alert(obj.showColor);
  	}
}

$.fn.changeColor.option = {};

  $('#test1').changeColor({ showColor: 'red'});
  $('#test2').changeColor({ showColor: 'blue'});

  $('#showButton').click(function(){
    $('#test1').changeColor('showOption');
    $('#test2').changeColor('showOption');
  });

＆＃13;

#test1, #test2 {
    padding: 10px 40px;
    background: #eee;
    display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="test1">test1</div>

<br /><br />

<div id="test2">test2</div>

<br /><br />

<button id="showButton">Show</button>

＆＃13;

在jquery插件中维护状态

1 个答案: