停止jQuery插件應用兩次到相同的元素

目前我想弄清楚如何在jQuery插件中使用默認和自定義設置。我希望能夠使用通用類將插件的默認設置應用於元素，但是另外通過選擇其ID來自定義其中一些元素。例如：http://jsfiddle.net/srkPT/2/停止jQuery插件應用兩次到相同的元素

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

但是，它取決於以特定順序應用的插件。現在，我很開心，但如果任何人都可以想出一種方法來獲得所需的效果，無論它應用了哪種順序，我都會非常感激。感謝大家的幫助。

來源

2012-06-16 Jon

您可以設置數據屬性並對其進行測試。

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

來源

2012-06-16 19:11:11 czarchaic

乾杯czarchaic，我設法得到它的工作使用您的建議稍作修改的版本，並改變插件應用於元素的順序。 http://jsfiddle.net/srkPT/3/ – Jon

若干選擇：

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-16 19:12:55 charlietfl

感謝您輸入charlietfl，但我不想添加額外的類或使用過濾器。我應該更具體 - 我已經更新了我的問題，以反映這一點。 – Jon

行..你必須修改一些東西......哪一部分更好？我有一個簡單的插件修復會有所幫助。這是由於AJAX問題嗎？如果這麼簡單的方法來解決這個問題 – charlietfl

不是ajax問題，但不用擔心，我已經設法讓它現在工作。謝謝你的幫助。 – Jon

停止jQuery插件應用兩次到相同的元素

回答

相關問題