jquery - 多个实例覆盖值

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 > ul").clientRoll({ 'speed': 2000, 'items': 4 }); $(".article-roll").clientRoll({ 'items': 3, 'speed': 1500 });

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

Answer 1

The extend method extends the object that you pass as the first parameter, and returns it.

Supply a new object as the first parameter if you want to merge two objects into a new one:

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