调用 .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，让用户定义两个类来表示成功和错误case 并将它们设置在元素上。

例子：

(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

Answer 2

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

Answer 3

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

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

您可以创建第二个 .resetcss() 函数来检查与所选元素关联的数据并将该数据设置为您的 CSS。或者您可以将此功能滚动到 .mycss() 中，以便在您传递样式参数时存储/设置 CSS 并在不带参数发送时恢复 CSS。

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