Question

对不起的头衔感到抱歉 - 我不知道该放什么。无论如何，我有这个对象我想循环，以动态输出一些图标onclick：

<button id="btn">hit me</button>

var socialMedia = {
    facebook: "http://facebook.com",
    twitter: "http://twitter.com",
    instagram: "http://instagram.com",
    dribbble: "http://dribbble.com",
    social: function() {
        var output = "<ul>";
        var myList = document.querySelectorAll('.socialSpot');

        for (var key in arguments[0]) {
            output += '<li><a href="' + this[key] + '"><img src="_assets/' 
                   + key + '.png" alt="' + key + 'icon"></a></li>';
        }

        output += '</ul>';

        for (var i = myList.length - 1; i >= 0; i--) {
            myList[i].innerHTML = output;
        };
    }
};

var theBtn = document.getElementById('btn');
theBtn.addEventListener('click', function() {
    socialMedia.social(socialMedia);
}, false);

我知道我可以删除方法并在传递对象时实例化它，但我想知道如何以这种方式去做。换句话说，我想将该函数作为socialMedia {}的方法。有什么指针吗？

Answer 1

只需在循环中添加if (typeof obj[key] != "string") continue;测试：

…
social: function(obj) {
    var output = "<ul>";
    var myList = document.querySelectorAll('.socialSpot');

    for (var key in obj) {
        if (typeof this[key] != "string") continue;
        output += '<li><a href="' + this[key] + '"><img src="_assets/' 
               + key + '.png" alt="' + key + 'icon"></a></li>';
    }

    output += '</ul>';

    for (var i = myList.length - 1; i >= 0; i--) {
        myList[i].innerHTML = output;
    };
}

当然，简单地使用另一个对象会更加清晰：

var socialMedia = {
    data: {
        facebook: "http://facebook.com",
        twitter: "http://twitter.com",
        instagram: "http://instagram.com",
        dribbble: "http://dribbble.com"
    },
    social: function(obj) {
        var data = obj || this.data;

        var output = "<ul>";
        for (var key in data) {
            output += '<li><a href="' + data[key] + '"><img src="_assets/' 
                   + key + '.png" alt="' + key + 'icon"></a></li>';
        }
        output += '</ul>';

        var myList = document.querySelectorAll('.socialSpot');
        for (var i = myList.length - 1; i >= 0; i--) {
            myList[i].innerHTML = output;
        };
    }
};

var theBtn = document.getElementById('btn');
theBtn.addEventListener('click', function() {
    socialMedia.social();
}, false);

Answer 2

您不需要传入socialMedia来访问社交功能中的socialMedia对象。由于社交功能的执行上下文是socialMedia的执行上下文，this将被绑定到社交媒体内部的社交媒体。换句话说

var socialMedia = {
 ...
 social: function(){
  var socialMedia = this;
  //socialMedia.facebook == this.facebook
  //socialMedia.twitter == this.twitter
  //you can loop through this inside of for in to get these properties 
  //(although you may want to make sure to avoid the function again)
 }
};

this无论如何都可用，因此您可以在没有任何参数的情况下致电socialMedia.social()。

Answer 3

您可以使用更简单的API进行操作，并将两者保持在一起（不将它们放在一起）

var socialMedias = (function() {

    var medias = {
        facebook: "http://facebook.com",
        twitter: "http://twitter.com",
        instagram: "http://instagram.com",
        dribbble: "http://dribbble.com",
    };

    return function(socials) {

        if (!socials) {
            return medias;
        }

        var output = "<ul>";
        var myList = document.querySelectorAll('.socialSpot');

        for (var key in socials) {
            output += '<li><a href="' + this[key] + '"><img src="_assets/' 
                   + key + '.png" alt="' + key + 'icon"></a></li>';
        }

        output += '</ul>';

        for (var i = myList.length - 1; i >= 0; i--) {
            myList[i].innerHTML = output;
        };
    };


})();

所以socialMedias()返回地图，可以像socialMedias().facebook一样提取单个条目，socialMedias(myArgument)会运行方法

循环通过对象输出图标javascript

3 个答案: