Question

我尝试创建jquery插件，它只在特定类上反映结果，而不是在所有相同的类上

jQuery插件

(function( $ ){
  $.fn.tooltip = function( options ) {    
    var settings = $.extend( {
      'content'         : 'top'      
    }, options);    
    return this.each(function() {       
      $(this).html(settings.content);
    });
  };
})( jQuery );

调用插件

<body>

<div class="toolbar"></div>

<script type="text/javascript">
$('.toolbar').tooltip({
    content:'this is first'
});
</script>

<div class="toolbar"></div>
<script type="text/javascript">
$('.toolbar').tooltip({
    content:'this is second'
});
</script>

</body>

我期待的结果：

this is first   
this is second

但结果显示：

this is second
this is second

那么如何创建仅反映特定类的插件。

Answer 1

添加一个类，告诉你的插件你已经在这样的

之前做过这个标记

(function( $ ){
  $.fn.tooltip = function( options ) {    
    var settings = $.extend( {
      'content'         : 'top'      
    }, options);    
    return this.not('.tooltiped').each(function() {       
       $(this).html(settings.content);
    }).addClass('tooltiped');
  };
})( jQuery );

示例：

http://jsfiddle.net/k7m6x/

更新

如Sheikh Heera所示，如果您只是更改元素的内容，则此代码就足够了：

  return this.not('.tooltiped').html(settings.content).addClass('tooltiped');

创建jQuery插件，它不会在同一个重复的类上反映结果

1 个答案: