如何从动态创建的按钮中获取属性？

Posted 2023-05-09

【中文标题】如何从动态创建的按钮中获取属性？

【英文标题】：How can I get attributes from dynamically created buttons?

【发布时间】：2017-11-27 05:31:24

【问题描述】：

所以，我正在构建某种电子商务网站，我需要使用 nodejs 和 ajax 从 mysql 数据库中导入一堆产品。

到目前为止，我已经能够做到这一点，并在每个产品下方创建某些按钮，这些按钮将指向 /product 页面，其中将显示该产品的其他信息。

由于这些按钮不是动态的，因此我需要添加一个包含产品 ID 的属性，然后我将使用该属性向服务器发送 POST 请求，以便获取有关该特定产品的信息。

虽然我能够将属性添加到按钮本身，但我不知道如何获取它们的值。

这就是我将属性添加到按钮的方式。

$(function () 
        $.ajax(
            type: 'POST',
            url: '/getPacotes',
            success: function (data) 
                for (var i = 0; i < data.length; i++) 

                    var idPacote = data[i].idPacote;
                    var nomePacote = data[i].Nome_Pacote;
                    var precoPacote = data[i].Preco_Pacote;
                    var fornecedorPacote = data[i].Fornecedor_Pacote;
                    var foto = "https://webitcloud.net/PW/1617/RMR/Views/images/Pacotes/" + data[i].Foto;

                    var pacoteSet1 = "<div class='col-md-4 pacotes'>";
                    var pacoteSet2 = "<img src=" + foto + " alt='Mountain View' style='width:150px;height:150px;'><br><br><input id=btnPac" + i + "' type='button' name='comprar' value='Comprar Pacote'>";
                    var pacoteSet3 = "</div>";

                    $("#pacotes").append(pacoteSet1 + "<h1>" + nomePacote + "</h1>" + "<h2>" + fornecedorPacote + "</h2>" + "<h3>" + precoPacote + "euros/mes </h3>" + pacoteSet2 + pacoteSet3);
                    $(document).find("#btnPac" + i).attr(
                        "idPacote": idPacote
                    );
                
            
        );
    );

这就是我试图获取它们的属性的方式

$("button").each(function () 
        console.log(this.idPacote);
        $.post("http://localhost:3000/pacote?id=" + this.idPacote);
    );

但它似乎不起作用 idPacote 返回未定义，我不知道为什么，因为我只是给按钮一个“id”并将 idPacote 替换为“id”本身，它将返回按钮 ID

对不起，如果这个问题听起来很愚蠢。我在这些事情上不是很有经验。

【问题讨论】：

试试$(this)，这是获取当前上下文的正常语法

您忘记了 id 的报价：id='btnPac"+i+"'

您尚未生成任何 <button> 元素来匹配您的 $("button") 选择器。您是否将它们放在未显示的代码中，或者您是否尝试选择 <input type='button' ？

我试图选择特定 div 中的所有按钮

【参考方案1】：

当您使用 jQuery 时，我建议您使用 html5 数据属性来为 HTML 元素设置指定属性：

<button data-id="1"></button>

您可以使用 jQuery 设置和访问它：

$('button').data('id', value); //set data-id

$('button').data('id'); //Read data-id

---

进一步变化

<input id=btnPac" + i + "' type='button' name='comprar' value='Comprar Pacote'>

到

<button name='comprar'>Comprar Pacote</button>

为了从 $('button') 中获取元素