Question

我想知道是否可以在新插件中使用attr()函数：

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

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

Answer 1

jQuery插件authoring guidelines推荐这种方法：

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

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

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

另请注意，属性（prop()）和属性（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>

在新插件中使用attr（）函数？

1 个答案: