3

我正在尝试创建一个小 jquery 插件，但我遇到的问题是，如果我为几个不同的 div 调用它几次，最后一次调用会覆盖所有其他调用，我会在每个 div 上得到最后一个结果。

<div class="p1"><p>text 1</p></div>
<div class="p2"><p>text 2</p></div>
<div class="p3"><p>text 3</p></div>

JS：

var changeColor = {

    init: function(options, elem) {
    var self = this;

    self.elem = elem;

    self.options = $.extend( {}, $.fn.changeColor.options, options );

    self.blueColor();
    },

    blueColor: function() {
    var self = this;

    $('p').css('color', self.options.color);
    }

};

$.fn.changeColor = function( options ) {
        return this.each(function() {
            var color = Object.create( changeColor );

            color.init( options, this );

            $.data( this, 'changeColor', color );
        });
    };

$.fn.changeColor.options = {
    color: 'green'
};

(function() {

$('.p1').changeColor({color: 'yellow'});
$('.p2').changeColor({color: 'blue'});

})();

现在两个<p>div 中的两个都是蓝色的，而不是第一个是黄色的，第二个是蓝色的。

4

1 回答 1

2

当您这样做时，您正在将颜色样式应用于所有<p>元素$('p')。使用 仅将更改应用于所选元素$(self.elem)。

改变这个

$('p').css('color', self.options.color);

为了这

$(self.elem).css('color', self.options.color);

你可以在这里看到一个小提琴，这部分代码在第 16 行。

编辑：正如skafandri所指出的那样，这会改变<div>颜色，而不是<p>'s。要更改段落的颜色，请更改您的选择器：

$('.p1 p').changeColor({color: 'yellow'});
$('.p2 p').changeColor({color: 'blue'});

在这里更新了小提琴。

于 2013-06-05T12:28:05.840 回答