如何將屬性設置爲動態創建的按鈕？

首先，你好。我是一名大學生，而不是一個非常有經驗的編碼員，所以如果我最終說出一些非常愚蠢的話，請原諒我。如何將屬性設置爲動態創建的按鈕？

無論哪種方式，我有一個學校項目，我必須使用Node.js創建一個功能性網站，人們可以在其中登錄和購買內容。

大部分的東西已經可以工作，但是我卻遇到了一些非常特殊的事情，我根本無法工作，但對於項目本身來說卻是必不可少的。

我使用AJAX將數據從mySql數據庫導入網站，該數據包含人們可以購買的產品。然後，這些產品會附加到HTML頁面本身，併爲每個附加產品動態創建兩個按鈕，一個是「立即購買」，另一個是「瞭解更多」。

現在，這些按鈕應該以某種方式與數據庫的值相關聯，但我不知道如何執行此操作。

$(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我如何給一個屬性動態創建按鈕

來源

2017-06-21 Rui

你只需要改變你的jQuery函數如下圖所示：

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

這應該是你的解決方案。

來源

2017-06-21 13:52:04

您可以在創建按鈕元素的html時做到這一點。通過使用字符串連接，這在設置ID已經在使用：

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

來源

2017-06-21 13:53:06

超載屬性HTML在我看來是一個壞主意。您可以在JS中創建元素，將數據綁定到它，然後將按鈕附加到dom。這就是使用jQuery非常簡單：

var button=$("<button>Show More</button>");//create 
button.on("click",showMore.bind({name:"test"}));//add listener 
$(document.body).append(button);//append 

function showMore(){ 
    alert(this.name); 
}

來源

2017-06-21 13:55:46

您可以創建一個新的輸入標籤，並設置這些屬性然後附加到div使用該代碼：

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

您可以爲其他人做同樣的（H1 ，h3）

來源

2017-06-21 14:08:12 k20human

如何將屬性設置爲動態創建的按鈕？

回答

相關問題