Javascript Jquery插件从选项获取选项

如何从另一组选项中获取选项

目前，它正在输出

opt.social

中每个选项的名称。相反，我希望它获取与每个选项名相关的实际HTML

因此，我们的想法是，在未来构建新的社交媒体网站时，可以通过插件选项轻松添加，而无需编辑插件

例如：

$.each(opt.social, function(index, value) {
  html += "<li>" + value.name + "</li>";
});

完整示例：

(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);

（函数（$）{
$.fn.socialMedia=函数（选项）{
//默认配置属性
var默认值={
社会：[
{name:“facebook.like_large”}，
{name:“twitter.large”}，
{name:“googlePlus.large”}
],
facebook：{
就像你说的那样：，
就像你说的那样：，
共享：“”
},
推特：{
大型：''，
小：“”
},
谷歌+：{
大型：''，
小：“”
}
};
var opt=jQuery.extend（默认值，选项）；
//生成HTML
$（this.append（generateHtml（））；
函数generateHtml（）{
var html='
'；
$每个（可选社会功能、功能（索引、值）{
html+=“
”+value.name+“
”；
});
html+='
'；
返回html；
}
}
$（“正文”）.socialMedia（）；
})（jQuery）；

在该代码中，

opt.social

是一个对象数组，每个对象都有一个“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>";
});

<代码>$。每个（可选，社交，功能（索引，值）{ var parts=value.name.split（'.'），partVal=opts； 对于（变量i=0；i”+partVal+“”； }); 诀窍在于这些“名称”属性是以通过对象图的虚线“路径”的形式出现的，JavaScript没有解释这些属性的内置方式。我上面写的代码从外部的“opts”对象开始，一部分一部分地遍历对象（部分之间用“.”字符分隔）。

我已经根据我了解的您想要的内容更新了您的

每个

social

条目都可以包含社会服务的

名称和要使用的默认
小部件

因此，您的
默认值可以如下所示：

social: [
  { name: 'facebook', widget : 'like_large'},
  { name: 'twitter', widget : 'large'},
  { name: 'googlePlus', widget : 'large'}
]

您的generateHTML（）可以是：

$。每个（opt.social，函数（索引，值）{
var default_widget=opt[value.name][value.widget]；
html+=“
”+默认控件+“
”；
//或者可能：
html+=$（“
”）.html（默认的_小部件）；
}); 
对于选项的来源以及您希望从中获得的具体内容，您还不是很明确。对于每个opt.social对象，我希望它使用名称查找等效的HTML选项。OK answer updated-我想我知道你现在想做什么了。我希望插件能够正常工作，而不需要从插件中手动声明每个社交插件。例如，您可以通过“选项”添加自己的社交插件，而无需编辑插件本身。@JohnMagnolia我仍然不能100%确定我理解您的意思，但我将通过猜测扩展我的答案：-）
$.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>";
});

social: [
  { name: 'facebook', widget : 'like_large'},
  { name: 'twitter', widget : 'large'},
  { name: 'googlePlus', widget : 'large'}
]

 $.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);
 });