jquery插件選項不正確擴展和覆蓋

-1

我有一個奇怪的問題，jquery插件和選項越過寫入。jquery插件選項不正確擴展和覆蓋

如果我像這樣安裝插件它works fine。

$("#social-media").socialMedia({ 
    url: "http://css-tricks.com", 
    social: [ 
     { name: "facebook", widget: "like_small" }, 
     { name: "twitter", widget: "small" }, 
     { name: "googlePlus", widget: "small" } 
    ]  
});

如果我補充一點，我需要覆蓋一個額外的選項，facebook like button does not load。

$("#social-media").socialMedia({ 
    url: "http://css-tricks.com", 
    social: [ 
     { name: "facebook", widget: "like_small" }, 
     { name: "twitter", widget: "small" }, 
     { name: "googlePlus", widget: "small" } 
    ], 
    facebook: { 
     id: 195838043798363 
    }  
});

來源

2012-02-23 John Magnolia

默認情況下，jQuery.extend()替換整個屬性。因此，如果默認這樣：

{ 
    … 
    facebook: { 
     like_large: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="box_count" data-width="120" data-show-faces="false"></div>', 
     like_small: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="button_count" data-width="120" data-height="21" data-show-faces="false" data-colorscheme="light"></div>', 
     share: '<a name="fb_share" type="box_count" share_url="{url}" href="http://www.facebook.com/sharer.php?u={url}&t={title}">Share</a>', 
     id: 195838043798363 
    }, 
    … 
}

而你的選擇是這樣的：

{ 
    … 
    facebook: { 
     id: 195838043798363 
    }  
    … 
}

整個facebook對象將{ id: 195838043798363 }被替換。

事實證明，jQuery.extend()支持做你正在試圖做的事情，如果你通過true作爲它的第一個參數。更改此行：

var opt = $.extend({},defaults, options);

這樣：

var opt = $.extend(true, {},defaults, options);

應該讓它做你想讓它做什麼。

來源

2012-02-23 18:31:37 s4y

這是正確的答案。忽略我的。 – Jivings 2012-02-23 18:33:18

這裏是jsfiddle來證明這個答案：http://jsfiddle.net/UwvDM/4/ – Jivings 2012-02-23 18:34:34

@Jivings感謝jsfiddle！其實，我喜歡你回答更好。雖然我的解決方案很簡單，但您的插件設計更好。 – s4y 2012-02-23 18:40:14

與分配對象要覆蓋整個facebook對象在你的插件使得它僅由id變量。

你最好使Facebook的帳號一個單獨的屬性覆蓋：

... 
facebook: { 
    like_large: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="box_count" data-width="120" data-show-faces="false"></div>', 
    like_small: '<div class="fb-like" data-href="{url}" data-send="false" data-layout="button_count" data-width="120" data-height="21" data-show-faces="false" data-colorscheme="light"></div>', 
    share: '<a name="fb_share" type="box_count" share_url="{url}" href="http://www.facebook.com/sharer.php?u={url}&t={title}">Share</a>',     
}, 
facebook-id: 1000000, 
...

http://jsfiddle.net/UwvDM/3/

來源

2012-02-23 18:31:02 Jivings

jquery插件選項不正確擴展和覆蓋

回答

相關問題