在新插件中使用attr()函数？

Question

我想知道是否可以attr()在新插件中使用该功能:

(function ($) {
     $.fn.resetColor = function() {
        var oldColor=this.attr("memColor");
        this.css('background-color',oldColor);
     };
})(jQuery);

我已经尝试过上面的代码,但它不起作用.我确定该memColor属性存在,因为我已经在$(document).ready块中使用警报对其进行了测试.

Answer 1

jQuery插件创作指南推荐这种方法:

(function ($) {
     $.fn.resetColor = function() {
         return this.each(function() {
            var elem = $( this );

            var oldColor = elem.attr("memColor");
            elem.css('background-color',oldColor);
         };
     });
}(jQuery));

1. 假设在一组元素上调用插件.
2. 获取要使用的jQuery包装元素.

另请注意,properties(prop())和attributes(attr())之间存在差异,前者引用JavaScript DOM HTMLElements上的属性,而后者引用标记中指定的HTML属性.jQuery也从版本1.6开始进行区分:

在特定情况下,属性和属性之间的差异可能很重要.在jQuery 1.6之前,.attr()方法有时在检索某些属性时会考虑属性值,这可能会导致行为不一致.从jQuery 1.6开始,.prop()方法提供了一种显式检索属性值的方法,而.attr()则检索属性.

演示:

    (function ($) {
         $.fn.resetColor = function() {
             return this.each(function() {
                var elem = $( this );

                var oldColor = elem.attr("memColor");
                elem.css('background-color',oldColor);
             });
         };
    $('.me').resetColor();
    }(jQuery));
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="me" memColor="Red">Lorem ipsum.</div>
<div class="me" memColor="Blue">Lorem ipsum.</div>