1

目前我正在尝试弄清楚如何在 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/

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

4

2 回答 2

4

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

$.fn.myPlugin=function(){
  return this.each( function(){
    if ( $( this ).data( 'test' ) ){
      return false;
    }
    $( this ).data( 'test', true );
    // plugin code
  });
};
于 2012-06-16T19:11:11.197 回答
0

几种选择：

1）向元素添加额外的类，然后根据类调用插件

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

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

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

然后在插件中：

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

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

于 2012-06-16T19:12:55.237 回答