Question

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

<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'});

})();

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

Answer 1

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

更改此

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

对于此

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

您可以看到fiddle here，代码的这一部分位于第16行。

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

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

Updated fiddle here

Jquery插件以同样的方式影响多个div

1 个答案: