Question

我正在尝试创建多个html链接以用作按钮。我现在正在创建15个，并且将来我可能需要添加更多，所以我想通过JS来做到这一点。以下代码在屏幕上添加对象，但按钮不执行指定的功能。事实上，他们根本不做任何事情，他们只是去index.html＃。

function buttonCreate(){

var element = $(".left");

for (i in upgrades){
        a = $('<a>',{
        text: i,
        href: '#',
        id: i
    });
    var upgrade_button = $('#' + i);
    upgrade_button.click(function(){upgrade(i);return false;});
    a.addClass('myButton');
    a.appendTo(element);

    para = $('<p>',{
        text: "",
        id: i+"_upgrade"
    });
    para.appendTo(element);

    para2 = $('<p>',{
        text: "",
        id: i+"_income"
    });
    para2.appendTo(element);
    document.getElementById(i+"_upgrade").innerHTML = "You need " + Math.round(upgrades[i].cost).toLocaleString() + " to upgrade " + i;
    document.getElementById(i+"_income").innerHTML = "Next " + i + " give " + Math.round(upgrades[i].income).toLocaleString() + " passive income";

    }
}

我也尝试将函数直接添加到新创建的链接元素中。

编辑：

我给你升级var和升级功能：

var upgrades = {
'A': {
    cost: 100,
    income: 10
},
'B': {
    cost: 1000,
    income: 100
},
'C': {
    cost: 10000,
    income: 1000
};

功能：

function upgrade(type){
if ((points - upgrades[type].cost) >= 0) {
    points -= upgrades[type].cost;
    upgrades[type].cost *= upgrade_incr;
    pincome += upgrades[type].income;

    clearInterval(intervalVar);
    intervalVar = setInterval(function(){pas_incr(pincome/8);},125);
    //upgrades[type].income *= val_incr;

    display = Math.round(points).toLocaleString();
    document.getElementById("points").innerHTML = "Points: " + display;
    document.getElementById(type+"_upgrade").innerHTML = "You need " + Math.round(upgrades[type].cost).toLocaleString() + " to upgrade " + type;
    document.getElementById(type+"_income").innerHTML = "Each " + type +" gives " + Math.round(upgrades[type].income).toLocaleString() + " passive income";
    document.getElementById("pincome").innerHTML = "You have " + Math.round(pincome).toLocaleString() + " passive income";
    }
}

我同时使用JS和Jquery的事实是我刚刚学习了jquery，并开始实现它。作为一个注释，我无法使用简单的JS。

Answer 1

您尝试在将按钮插入DOM（upgrade_button）之前查询该按钮。但是您已经在本地范围内拥有了按钮（a）。只需在按钮创建过程中添加click属性即可。

而不是：

   a = $('<a>',{
        text: i,
        href: '#',
        id: i
    });
    var upgrade_button = $('#' + i);
    upgrade_button.click(function(){upgrade(i);return false;});

尝试：

   var a = $('<a>',{
        text: i,
        href: '#',
        id: i,
        click: function(){upgrade(i);return false;}
    });

<强>更新

评论中的TrueBlueAussie状态，您无法在i关闭中使用click，因为它会假设您for loop的最终值为click。实际上是var a = $('<a>',{ text: i, href: '#', id: i, click: function(){ upgrade(this.id); return false; } });。

新版本：

{{1}}

Answer 2

在将元素插入DOM树之前，您正在进行var upgrade_button = $('#' + i);，因此jQuery将无法使用ID选择器查找它。因此，当您将点击处理程序附加到它时，upgrade_button不代表任何内容。

此外，upgrade_button与a变量相同，因此您可以完全废弃它，只需使用a。

函数添加在与jQuery的链接上

2 个答案: