Question

目前我正在试图弄清楚如何在jQuery插件中使用默认和自定义设置。我希望能够使用通用类将插件的默认设置应用于元素，但另外通过选择ID来自定义其中一些元素。示例：http://jsfiddle.net/srkPT/2/

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <title>Untitled Document</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css">
        .box {width:200px; height:200px; padding:50px; margin:40px; border:1px solid; float:left;}
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
        </head>

        <body>

       <div class="box">Box 1 - </div>

    <div id="one" class="box">Box 2 - </div>

    <div id="two" class="box">Box 3 - </div>

    <div class="box">Box 4 - </div>

        <script type="text/javascript">

    (function($) {


        $.fn.myPlugin = function(params) {

            var defaults = {

                background: '#ddd',

                content: 'foo'

            };

            var params = $.extend(defaults, params);

            return this.each(function() {

                $(this).css('background-color', params.background)

                .append(params.content + ' ');

            }); //RETURN this EACH

        }; //fn myPlugin

    })(jQuery);


        $(function(){

        $('.box').myPlugin();

            $('#one').myPlugin({content:'bar'});

            $('#two').myPlugin({background:'yellow'});

        });//document READY

        </script>

        </body>
        </html>

运行时会发生的事情是它将2个内容附加到#one和#two，我可以理解为什么;该插件使用.box（包括#one和#two）触发所有元素，然后在div #one和#two上再次运行，将新内容添加到顶部。

如果不在选择器上更改或运行过滤器，或者在html中添加额外的类，是否有任何实用的方法来解决这个问题，因此它不会将插件两次应用于同一个元素？提前谢谢。

更新

得益于czarchaic的建议，这项工作得以实现。示例：http://jsfiddle.net/srkPT/3/

但是，它取决于按特定顺序应用的插件。现在，我很高兴，但如果有人能想出一种方法来获得所需的效果而不管它应用的顺序，我将非常感激。感谢大家的帮助。

Answer 1

您可以设置数据属性并对其进行测试。

$.fn.myPlugin=function(){
  return this.each( function(){
    if ( $( this ).data( 'test' ) ){
      return false;
    }
    $( this ).data( 'test', true );
    // plugin code
  });
};

Answer 2

有几种选择：

1）向元素添加其他类，然后根据类

调用插件

$('.box.yellow').myPlugin({background:'yellow'});

2）将data-属性添加到标记中并在插件中检查它们是否存在并在插件中相应地修改html

<div class="box" data-bgColor="yellow">Box 1 - </div>

然后插件：

 if( $(this).data('bgColor')){
      $(this).doSomething();
 }

方法将部分取决于插件的整体复杂性或您需要使用它的频率

停止jQuery插件应用两次到同一个元素

2 个答案: