Question

首先，你好。我是一名大学生，而不是一位经验丰富的编码员，所以请原谅我，如果我最后说的话真的很蠢。

无论哪种方式，我都有一个学校项目，我必须使用Node.js创建一个功能性网站，人们可以登录并购买东西。

大部分内容已经有效，但是我遇到了一个非常具体的问题，我根本无法开展工作，但这对项目本身至关重要。

我使用AJAX将数据从mySql数据库导入网站，该数据包含人们可以购买的产品。然后，这些产品将附加到HTML页面本身，并为每个附加的产品动态创建两个按钮，其中一个显示＆＃34;立即购买＆＃34;另一个说＆＃34;了解更多＆＃34;。

现在，这些按钮应该以某种方式与数据库的值相关联，但我不知道如何执行此操作。

$(document).ready(function () {
$(function () {
    $.ajax({
        type: 'POST',
        url: 'http://localhost:3000/getPacotes',
        success: function (data) {
            console.log(data);
            for (var i = 0; i < data.length; i++) {
                var pacoteSet1 = "<div class='col-md-4 pacotes'>";
                var pacoteSet2 = "<input id=btnPac"+
                      i + " type='button' name='comprar' value='Comprar Pacote'>";
                var pacoteSet3 = "</div>";
                var idPacote = data[i].idPacote;
                var nomePacote = data[i].Nome_Pacote;             
                $("#pacotes").append(pacoteSet1 +
                     "<h1>" + nomePacote + "</h1>" +
                     "<h1>" + nomePacote + "</h1>" +
                    "<h3>" + precoPacote + "euros/mes </h3>" +
                    pacoteSet2 + 
                    pacoteSet3);

            }
        }
    });
});
});

我的老师告诉我给我创建的按钮一个attr，这就是我现在正在尝试做的事情，但我不知道怎么做，我的意思是，如果按钮是静态的它会很简单，但由于创建文档时按钮不存在，我不知道这是否有用

$("#btnPac" + i).attr({"id": idPacote,
         "nome": nomePacote,
         "preco": precoPacote,

});

无论如何，希望我没有听起来太愚蠢，并提前感谢

TL：DR如何为动态创建的按钮赋予属性

Answer 1

您只需要更改您的jquery函数，如下所示：

$(document).find("#btnPac" + i).attr({"id": idPacote,
         "nome": nomePacote,
         "preco": precoPacote
});

这应该是你的解决方案。

Answer 2

您可以在创建按钮元素的html时执行此操作。通过使用字符串连接，您在设置ID时已使用该字符串连接：

 var pacoteSet2 = "<input id=btnPac"+ i + "  nome='" + nomePacote + "' preco='" + precoPacote + "' type='button' name='comprar' value='Comprar Pacote'>";

Answer 3

在我看来，使用属性重载HTML是一个坏主意。您可以在JS中创建Elements，将数据绑定到它，然后将按钮附加到dom。这对jquery来说很容易：

docker run -it -e ROCKETCHAT_URL="<your rocketchat instance>:<port>" -e ROCKETCHAT_ROOM="" -e LISTEN_ON_ALL_PUBLIC=true -e ROCKETCHAT_USER=bot -e ROCKETCHAT_PASSWORD=bot -e ROCKETCHAT_AUTH=password -e BOT_NAME=bot -e EXTERNAL_SCRIPTS="hubot-pugme,hubot-help" rocketchat/hubot-rocketchat

Answer 4

您可以创建一个新的输入标记并设置这些属性，然后使用以下代码附加到div：

 $('<input/>', {
    id: 'btnPac' + i,
    nome: nomePacote ,
    preco: precoPacote ,
    type: 'button'
  }).appendTo("#pacotes");

您可以为其他人（h1，h3）做同样的事情

如何为动态创建的按钮设置属性？

4 个答案: