如何通过将参数传递给func来更改默认值?

时间:2012-08-05 20:35:58

标签: javascript jquery

我为我的函数设置了默认值,但是当我想通过传递参数更改它们时,值不会改变?

这是JsFiddle example

这是我的标记:

HTML:

<div class='container'>
    <img src='https://encrypted-tbn0.google.com/images?q=tbn:ANd9GcRbQ6aMnp7uA2VHgEOY6oU24DcB-ZvoBF_puGTB6kq4c8DyMJr2'/>
    <img src='http://www.fullscreensavers.com/pics/nature02l.jpg' />
    <img src='http://www.fullscreensavers.com/pics/nature03l.jpg' />
</div>

CSS:

.container{
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 200px;
    margin-top: 50px;
}

.container img{
    position: absolute;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
    display: none;
}
​

使用Javascript:

var InfiniteRotator = {
    init: function(domEle, options) {
        options = {
            itemInterval : 5000,
            fadeTime : 2500,
            currentItem : 0
        };
        //count number of items
        var numberOfItems = $('img', domEle).length;
        //show first item
        $('img', domEle).eq(options.currentItem).fadeIn();
        //loop through the items
        var infiniteLoop = setInterval(function() {
            $('img', domEle).eq(options.currentItem).fadeOut(options.fadeTime);
            if (options.currentItem == numberOfItems - 1) {
                options.currentItem = 0;
            } else {
                options.currentItem++;
            }
            $('img', domEle).eq(options.currentItem).fadeIn(options.fadeTime);
        }, options.itemInterval);
    }
};

InfiniteRotator.init($(".container"),{currentItem: 1});​

3 个答案:

答案 0 :(得分:3)

function(…, options) {
    options = {…};

有了这个,你只需要覆盖options参数。你想要的是extend默认选项对象与参数的属性:

function(…, customOptions) {
    var defaults = {…};
    var options = $.extend(defaults, customOptions);
    ...

更短,变化更小的混淆:

function(…, options) {
    options = $.extend({…}, options);
    ...

答案 1 :(得分:2)

function(domEle, options) {
    options = $.extend({
        itemInterval : 5000,
        fadeTime : 2500,
        currentItem : 0
    }, options);
}

编辑:哎呀,太晚了。

答案 2 :(得分:1)

init: function(domEle, options) {
  options = options || {
    itemInterval : 5000,
    fadeTime : 2500,
    currentItem : 0
  };