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 の両方が青になり、最初の 1 つが黄色で 2 つ目の青が青になります。

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>ます。段落の色を変更するには、セレクターを変更します。

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

ここでフィドルを更新しました。

于 2013-06-05T12:28:05.840 に答える