javascript - Jquery 插件从选项中获取选项

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 是一个对象数组，每个对象都有一个“名称”属性。

因此，

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”对象开始逐个遍历对象(部分由“.”字符分隔)。