調用.css（）後觸發事件（保存當前樣式）？

情況：如果返回的對象（來自ajax調用）包含錯誤屬性，我的jQuery插件允許我傳遞要執行的函數。在該功能中，可以設置css()屬性來突出顯示失敗。在代碼參數isError被用來模擬這個。調用.css（）後觸發事件（保存當前樣式）？

問題：當插件調用連續兩次且有成功的一個錯誤後，當然風格不變，$(this).html("Success")顯示令人毛骨悚然的紅色文字。

問題：在調用.css()後是否有任何方法來執行事件，從而保存當前樣式以便稍後恢復（僅在成功時）？

<div id="container"></div> 
<script> 
     $('#container').attach({}, true); // First call is error 
     $('#container').attach({}, false); // Second call is success 
</script>

這是（部分）我的插件：

(function($) { 
    $.fn.attach = function(options, isError) { 

     var opt = $.extend({ 
     onError : function(message) { // Default function for errors 
      this.html('Error: ' + message + '.').css('color', 'red'); 
     } 
     }, options); 

     // Loop each selection item 
     this.each(function() { 

     if(isError) // An error occurred, call opt.onError 
     { 
      opt.onError.call($(this), "Message"); 
      return true; // End of the current element process 
     } 

     $(this).html("Success"); // No errors, set success text 

     }); 

    }; 
})(jQuery);

來源

2012-02-03 gremo

不要設置風格的JS，用JS設置一個類，並用實際的CSS設置樣式。 – zzzzBov 2012-02-03 16:18:58

你可以做一個額外的jquery插件，它基本上是一個修改後的'.css（）'方法，它可以做你想做的事情嗎？那麼你只需調用這個修改後的方法。 – maxedison 2012-02-03 16:19:51

@zzzzBov和maxedison你的解決方案似乎都很有趣...... – gremo 2012-02-03 16:23:49

但考慮這件事，在我看來，後一個更簡潔的方法是讓用戶定義的onSuccess回調爲好，而不是使用。 css，讓用戶定義的兩個類的成功和錯誤的情況下，並將它們設置在元件上。

例子：

(function($) { 
    $.fn.attach = function(options, isError) { 

     var opt = $.extend({ 
     onError : function(message) { // Default function for errors 
      $(this).html('Error: ' + message + '.'); 
     }, 
     onSuccess: function(message) { 
      $(this).html('Success'); 
     }, 
     errorClass: 'error', 
     successClass: 'success' 
     }, options); 

     // Loop each selection item 
     this.each(function() { 

     var method = 'onSuccess', 
      cssClass = 'successClass'; 


     if(isError) // An error occurred, call opt.onError 
     { 
      method = 'onError'; 
      cssClass = 'errorClass'; 
      return true; // End of the current element process 
     } 

     opt[method].call(this, 'Message'); 
     $(this).removeClass(cssClass === 'successClass' ? opt.errorClass : opt.successClass) 
       .addClass(opt[cssClass]);  
     }); 
    }; 
})(jQuery);

請注意，我也改變call($(this),...)到call(this, ...)這樣回調行爲方式作爲傳統的回調一樣。

然而，回答說這個問題：爲了讓css觸發一個事件，你可以用的功能，像這樣：

(function($) { 
    var orig_css = $.fn.css; 
    $.fn.css = function() { 
     var result = orig_css.apply(this, arguments); 
     if(arguments.length === 2) { // CSS property was set 
      $(this).trigger('css_changed'); // or whatever event you want to trigger 
     } 
     return result; 
    }; 
}(jQuery));

DEMO

來源

2012-02-03 17:25:55

對不起，爲簡單起見，我省略了插件選擇填充來自服務器的數據，所以成功可以不會傳遞給插件。 – gremo 2012-02-03 19:52:24

你可以做一個包裝功能.css()做這個。

你的功能，.mycss()，會很簡單。你採用你想要設置的樣式作爲參數，就像.css()一樣。您用.data()錄製當前的CSS，以便稍後檢索。然後，正常使用.css()來設置所需的樣式。

您可以製作第二個.resetcss()函數來檢查與所選元素相關的數據並將該數據設置爲您的CSS。或者，您可以將此功能轉換爲.mycss()，以便在傳遞樣式參數時存儲/設置CSS，如果不帶參數發送CSS，則會恢復CSS。

您的確切需求可能會有所不同，但您可以修改功能以滿足這些需求。您可能需要在設置新數據之前檢查存儲的樣式數據，並決定是恢復到舊樣式還是使用新樣式。另外，如果你用CSS類（一個不錯的選擇）去你可以做一個.myclass()函數，而不是存儲您以前的類，並且設置一個新的類，允許您檢索以後吧。

來源

2012-02-03 16:23:59

這聽起來不錯，但它會強制插件用戶記住使用'.mycss（）'而不是... – gremo 2012-02-03 16:26:03

一種不同的，更簡單的途徑可能是使用類和不店老班工作。當出現錯誤時，分配錯誤類。使用.addClass()標記錯誤狀態，如果成功，則使用.removeClass刪除錯誤類（如果存在）。如果它不存在，jQuery只是繼續前進，沒有任何錯誤。

來源

2012-02-03 16:30:11

調用.css（）後觸發事件（保存當前樣式）？

回答

相關問題