在 Facebook API 中创建按钮以显示/隐藏（切换）

Question

我正在使用 Facebook Javascript API。我想创建这样的东西：

1. Album Name [show/hide]

Album details

2. Album Name [show/hide]

Album details

3. Album Name [show/hide]

Album details

1. 首先我检索了专辑列表
2. 专辑名称旁边会有一个按钮，可以使用 jQuery 切换（显示/隐藏）专辑的详细信息。
3. 专辑详情被放入具有特定 ID 的 p 标签中（“album1”、“album2”等...）
4. 使用 jQuery 切换特定 ID。
5. 但是，在 FB.api 中创建的按钮 in1 无法切换。
6. FB.api 之外的另一个按钮 out1 可以切换。

QNS：为什么FB.api里面的按钮不能切换？

我只想为每张专辑制作一个特定的按钮，这样我就可以专门切换每张专辑的详细信息。

部分代码如下：

<script>
    function albums()
    {

    FB.api('me/albums/', function(response) {
      for (var i=0; i<response.data.length; i++) {
        var album = response.data[i]; // each album

        // Album Name
        var albumName = response.data[i].name;
        var para = document.createElement('p');
        var node = document.createTextNode(albumName);
        para.appendChild(node);
        document.body.appendChild(para); // put p into body of document

        // Button
        var btn = document.createElement("button");
        btn.id = "in"+(i+1);
        var t = document.createTextNode("inside");      
        btn.appendChild(t);
        document.body.appendChild(btn);  


        // Album Details
        var para = document.createElement('p');
        para.id = "album"+(i+1);
        var node = document.createTextNode("Album details");
        para.appendChild(node);
        document.body.appendChild(para);
        }   


    });
    }
</script>   

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<button id="out1">out1</button>
<script>
jQuery( "#out1" ).click(function() {
  jQuery( "#album1" ).toggle();
});
jQuery( "#in1" ).click(function() {
  jQuery( "#album1" ).toggle();
});
</script>   

Answer 1

您正在尝试在异步加载的元素上放置一个偶数侦听器。意思是，按钮还不存在。确保您了解异步的含义，这对于 JavaScript 开发人员非常重要，尤其是在使用 Facebook JS SDK 时。并在创建/显示按钮后立即向按钮添加事件侦听器。

另外，请记住，您只会在第一个按钮上放置一个事件监听器。