jquery - 在调用 .css() 后触发事件(保存当前样式)？

Question

情况:如果返回的对象(来自 ajax 调用)包含错误属性，我的 jQuery 插件允许我传递要执行的函数。在该函数中，可以设置 css() 属性来突出显示失败。在代码中参数isError就是用来模拟这个的。

问题:当插件被连续调用两次并且出错后成功时，当然样式没变并且 $(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);

Answer 1

但在考虑之后，我认为更简洁的方法是让用户也定义一个 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