Question

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

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

Answer 1

在该代码中，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”对象开始逐个部分地遍历对象（部分用“。”字符分隔）。

Answer 2

根据我的理解，我已经更新了您的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);
 });

Jquery插件从选项中获取选项

2 个答案: