调用 .css() 后触发事件（保存当前样式）？

Question

情况：我的 jQuery 插件允许我传递一个在返回对象（来自 ajax 调用）包含错误属性时要执行的函数。在该函数中，可以设置 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));

演示

Answer 2

另一种更简单的方法可能是使用类并且不存储旧类。当出现错误时，分配错误类别。使用 .addClass() 标记错误状态，成功后，使用 .removeClass 删除错误类（如果存在）。如果它不存在，jQuery 就会继续前进，不会出现任何错误。

Answer 3

您可以为 .css() 创建一个包装函数来执行此操作。

您的函数 .mycss() 将非常简单。您可以将要设置的样式作为参数，就像 .css() 一样。您可以使用 .data() 记录当前的 CSS，以便稍后检索。然后你照常使用 .css() 来设置你想要的样式。

您可以创建第二个 .resetcss() 函数来检查与所选元素关联的数据并将该数据设置为 CSS。或者，您可以将此功能放入 .mycss() 中，这样，如果您传递样式参数，它会存储/设置 CSS；如果您在不带参数的情况下发送它，它会恢复 CSS。

您的具体需求可能略有不同，但您可以修改函数来满足这些需求。在设置新数据之前，您可能需要检查存储的样式数据，并决定是恢复旧样式还是使用新样式。或者，如果您使用 CSS 类（一个不错的选择），您可以创建一个 .myclass() 函数来存储您以前的类并设置一个新类，以便您稍后检索该类。