Question

我创建了一个非常简单的jQuery徽标旋转插件，但第二个实例覆盖了我的第一个实例。

(function($){
    $.fn.clientRoll = function(settings) {

      var config = {
        'speed': 10000,
        'items': 3
    };

  var settings = $.extend(config, settings);

  var itemRoll = $(this); 

  var childHeight = $(itemRoll).children().eq(0).outerHeight();
  $(itemRoll).height(childHeight);

  $.fn.clientRollLeft = function() {
    var logoWidth = $(this).children(':first').innerWidth();

    $(this).children(':first').not(':animated').clone().css({ opacity: 0, marginLeft: "" }).insertAfter($(this).children(':last'))/*.delay(200).animate({ opacity: 1 })*/;

    $(this).children(':first').not(':animated').animate({ 
      marginLeft: -(logoWidth), opacity: 0 }, function () {   
        $(this).remove();
    });

    $(this).children(":gt(" + (config.items - 1) + ")").css({ opacity: 0, background: "#FF0" }).delay(300).animate({ opacity: 1, background: "#FFF" });
}

};
})(jQuery);

所以每当我写这样的东西： $（“。client-roll div＆gt; ul”）。clientRoll（{'speed'：2000，'items'：4}）; $（“。article-roll”）。clientRoll（{'items'：3，'speed'：1500}）;

来自第一个实例的“items”值被第二个实例中的值3覆盖。

Answer 1

extend method扩展您传递的对象作为第一个参数，并将其返回。

如果要将两个对象合并为一个新对象，请提供一个新对象作为第一个参数：

var settings = $.extend({}, config, settings);

多个实例覆盖值

1 个答案: