调用.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（）后触发事件（保存当前样式）？

回答

相关问题