javascript - 在 jquery 插件中维护状态

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 = {};

我尝试在下面使用它。

$(document).ready(function(){
  $('#test1').changeColor({ showColor: 'red'});
  $('#test2').changeColor({ showColor: 'blue'});

  $('#showButton').click(function(){
    $('#test1').changeColor('showOption');
    $('#test2').changeColor('showOption');
  });
});

对于 test1 插件，我已将 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

但是我修改了您的插件结构以维持状态，您可以检查以下内容:

$.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');
  });

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

<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>