如何為每個自動生成的按鈕分配不同的ID？

Question

我使用Facebook API從用戶獲取所有組，然后使用FQL的另一個函數為每個組創建一個不同的div，並為每個div分配一個按鈕，該按鈕鏈接到另一個頁面，例如：

$('.groupButton').click(function() {  
  window.location ='anotherpage.html?groupid=' + groupid;
});

但是在每個按鈕上，它分配了最后一個按鈕的組ID。 我不知道哪里出了錯。

2個功能：

        function getGroupsIds(){
            document.getElementById('content_text').innerHTML = "";
            FB.api('/me/groups',function(resp){
                for (var i=0, l=resp.data.length; i<l; i++){ 
                getGroupInfo(resp.data[i].id);
                }
            });
        }


        function getGroupInfo(groupid){
            FB.api({
                method: 'fql.query',
                query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
            }, function(resp){
                var content_text = document.getElementById('content_text');
                var group = new Array(); 
                for (var i=0, l=resp.length; i<l; i++) 
                {


                    groupinput = document.createElement('button');
                    groupinput.className = "groupButton";            
                    groupinput.innerHTML = "Vizualise";

                    $('.groupButton').click(function() {  
                    window.location ='pages/appviz.html?groupid=' + groupid;
                    });


                    groupdiv.appendChild(groupinput);
                    content_text.appendChild(groupdiv);

                }
            });
    }

Answer 1

從哪里獲得組ID？ 不清楚。 您可以將按鈕中的groupid分配為id。 然后在單擊按鈕時獲取值。

$('.groupButton').click(function() {
groupid = this.id;
window.location ='anotherpage.html?groupid=' + groupid;
});

輸入會像

<input type='button' id='1' value='Profile' class='groupButton' />

希望這會幫助你。

Answer 2

好吧，我使用了javascript，並且有效。

 groupinput.onclick = function(){ window.location.replace('pages/appviz.html?groupid=' + groupid);};

Answer 3

您正在for循環中反復分配單擊處理程序。 這導致groupButton類的所有按鈕導航到循環中處理的最后一個groupid 。

for (var i=0, l=resp.length; i<l; i++) {
    // this gets reassigned resp.length times
    $('.groupButton').click(function() {
        window.location ='pages/appviz.html?groupid=' + groupid;
    }
}

您可能想要的是

function getGroupInfo(groupid){
    FB.api({
        method: 'fql.query',
        query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
    },
    function(resp) {
        ...
        for() { ... }

        groupdiv.appendChild(groupinput);
        content_text.appendChild(groupdiv);

        // assign click handler after building the elements
        $('.groupButton').click(function() {
            window.location = 'pages/appviz.html?groupid=' + this.id;
        });
    }

$('.groupButton')是groupButton類的所有元素的groupButton （請參見Class Selector ）。 因此，您需要this.id來獲取您單擊的按鈕實例的id 。

Answer 4

最有可能只是從循環內部刪除以下代碼

 $('.groupButton').click(function() {  
                window.location ='pages/appviz.html?groupid=' + groupid;
                });

並將其放在函數function getGroupInfo(groupid) ，因為click函數僅用於執行操作。 嘗試讓我們知道它是否有效。

function getGroupInfo(groupid){
            FB.api({
                method: 'fql.query',
                query: 'Select name, description, gid, pic_cover from group where gid=' + groupid
            }, function(resp){
                var content_text = document.getElementById('content_text');
                var group = new Array(); 
                for (var i=0, l=resp.length; i<l; i++) 
                {


                    groupinput = document.createElement('button');
                    groupinput.className = "groupButton";            
                    groupinput.innerHTML = "Vizualise";
                    groupinput.id = "g"+groupid;

                    groupdiv.appendChild(groupinput);
                    content_text.appendChild(groupdiv);

                }
            });
    }

$('.groupButton').click(function() {  
groupid = this.id;
 window.location ='pages/appviz.html?groupid=' + groupid.substr(1);
});

嘗試這個