如何为每个自动生成的按钮分配不同的ID?

时间:2013-04-23 17:31:20

标签: javascript jquery

我使用Facebook API从用户获取所有组,然后使用FQL获取另一个函数,为每个组创建一个不同的div,并为每个div分配一个链接到另一个页面的按钮,如:

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

但是在每个按钮上它都会分配最后一个按钮的groupid。 我不知道哪里出错了。

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

                }
            });
    }

4 个答案:

答案 0 :(得分:1)

从哪里获得groupid?不清楚。您可以将按钮中的groupid指定为id。然后在单击按钮时获取值。

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

输入就像

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

希望这会对你有所帮助。

答案 1 :(得分:0)

嗯,我使用的是javascript,但它确实有效。

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

答案 2 :(得分:0)

您正在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类的所有元素的集合(请参阅Class Selector)。因此,您需要this.id来获取您点击的按钮实例的id

答案 3 :(得分:0)

最有可能只是从循环内部删除以下代码

 $('.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);
});

试试这个