如何从另一组选项中获取选项。
JS Fiddle Example
目前,这是在opt.social
输出每个选项的名称。相反,我希望它获取与每个选项名称相关的实际HTML。
因此,我们的想法是,在未来建立新的社交媒体网站时,可以通过插件选项轻松添加,无需编辑插件。
示例:
$.each(opt.social, function(index, value) {
html += "<li>" + value.name + "</li>";
});
我试过了
opt[value.name];
opt.value.name;
opt(value.name);
完整示例:
(function ($) {
$.fn.socialMedia = function (options) {
// default configuration properties
var defaults = {
social: [
{ name: "facebook.like_large"},
{ name: "twitter.large"},
{ name: "googlePlus.large"}
],
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-show-faces="false" data-colorscheme="dark"></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>'
},
twitter: {
large: '<a href="http://twitter.com/share" class="twitter-share-button" data-url="{url}" data-count="vertical">Tweet</a>',
small: '<a href="http://twitter.com/share" class="twitter-share-button" data-url="{url}">Tweet</a>'
},
googlePlus: {
large: '<div class="g-plusone" data-size="tall" data-href="{url}"></div>',
small: '<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120" data-href="{url}"></div>'
}
};
var opt = jQuery.extend(defaults, options);
// Generate HTML
$(this).append(generateHtml());
function generateHtml() {
var html = '<ul>';
$.each(opt.social, function(index, value) {
html += "<li>" + value.name + "</li>";
});
html += '</ul>';
return html;
}
}
$("body").socialMedia();
})(jQuery);
答案 0 :(得分:2)
在该代码中,opt.social
是一个对象数组,每个对象都有一个“name”属性。
因此,
var firstOptName = opt.social[0].name;
等等。 opt.social
数组应该用数字索引。现在,opt.googlePlus
只是一个对象(在这种情况下)有两个属性,因此不涉及数组索引:
var googleLarge = opt.googlePlus.large;
编辑 - 如果您想改变该循环以显示HTML:
$.each(opt.social, function(index, value) {
var parts = value.name.split('.'), partVal = opts;
for (var i = 0; i < parts.length; ++i)
partVal = partVal[parts[i]];
html += "<li>" + partVal + "</li>";
});
诀窍是那些“名称”属性是通过对象图形的虚线“路径”形式,而JavaScript没有内置的解释方式。我上面写的代码从外部的“opts”对象开始逐个部分地遍历对象(部分用“。”字符分隔)。
答案 1 :(得分:1)
根据我的理解,我已经更新了您的fiddle。
每个social
条目可以包含社交服务的name
和要使用的默认widget
。
所以你的defaults
可以是这样的:
social: [
{ name: 'facebook', widget : 'like_large'},
{ name: 'twitter', widget : 'large'},
{ name: 'googlePlus', widget : 'large'}
]
你的generateHTML()可以是:
$.each(opt.social, function(index, value) {
var default_widget = opt[value.name][value.widget];
html += "<li>" + default_widget + "</li>";
// or maybe:
html += $('<li></li>').html(default_widget);
});