英文:
How to dynamicaly set up unique id to objects in js?
问题
在.NET项目中编写代码时，遇到了JavaScript的问题。
我需要一种方法来触发单击“生成”按钮，该按钮在单击后会获取来自下拉菜单的数据。
我有一个名为“btn”的按钮，当我单击它时，页面会加载一个带有“dropdown”按钮的图像。我需要在单击“Dropdown”按钮时获取下拉菜单中的数据（n、size、url），以便稍后使用，但是单击事件只读取第一个按钮的值。我尝试创建一个方法来创建唯一的按钮ID，但它不起作用，所有按钮都具有相同的ID。
var i = 0;
$('.dropdown').each(function () {
i++;
var newID = 'VarBtn' + i;
$(this).attr('id', newID);
});
$(document).ready(() => {
$('#btn').click(function () {
var input = {};
input.n = parseInt($('#quantity').val());
input.prompt = $('#txt').val();
input.size = $('#sel').find(":selected").val();
$.ajax({
url: '/Home/GenerateImage',
method: 'post',
contentType: 'application/json',
data: JSON.stringify(input)
}).done(function (data) {
$.each(data.data, function () {
$('#display').append(
'<div class="col-md-3 p-10" style="padding-top:10px">' +
'<div class="dropdown">' +
'<button class="btnV" id="idOne">Dropdown</button>' +
'<div id="myDropdown" class="dropdown-content">' +
'<br>Select size' +
'<select id="Vsel">' +
'<option selected>256x256</option>' +
'<option>512x512</option>' +
'<option>1024x1024</option>' +
'</select>' +
'<br>Enter quantity' +
'<input type="number" id="Vquantity" value="1" min="1" max="10" />' +
'<br>' +
'<button id="VarBtn_' + i + '">Generate</button>' +
'</div>' +
'</div>' +
'<img class="p-10" id="GenImg" src="' + this.url + '">' +
'</div>');
});
});
});
$(document.body).on('click', '#VarBtn', function () {
//Code..
});
});
我尝试为按钮创建唯一的ID，以便单击“VarBtn”按钮将访问所需的按钮，并通过下拉菜单的唯一ID获取必要的数据，但是所有ID仍然相同。
英文:
Writing a project in .Net and having trouble with js.
I need a method to trigger a click on the 'generate' button that takes data from the (dropdown menu) after the click.
I have a button 'btn', when I click on it the page loads an image with a 'dropdown' button. I need to take data from the dropdown menu(n, size, url) when I click on the button 'Dropdown' to use it later but the onclick method only reads the values of the first button. I tried to create a method to create unique button id but it doesn't work, all buttons have the same id.
var i = 0;
$('.dropdown').each(function () {
i++;
var newID = 'VarBtn' + i;
$(this).attr('id', newID);
});
$(document).ready(() =>
{
$('#btn').click(function ()
{
var input = {};
input.n = parseInt($('#quantity').val());
input.prompt = $('#txt').val();
input.size = $('#sel').find(":selected").val();
$.ajax({
url: '/Home/GenerateImage',
method: 'post',
contentType: 'application/json',
data: JSON.stringify(input)
}).done(function (data) {
$.each(data.data, function () {
$('#display').append(
'<div class="col-md-3 p-10" style="padding-top:10px">' +
'<div class="dropdown">' +
'<button class="btnV" id="idOne">Dropdown</button>' +
'<div id="myDropdown" class="dropdown-content">' +
'<br>Select size' +
'<select id="Vsel">' +
'<option selected>256x256</option>' +
'<option>512x512</option>' +
'<option>1024x1024</option>' +
'</select>' +
'<br>Enter quantity' +
'<input type="number" id="Vquantity" value="1" min="1" max="10" />' +
'<br>' +
'<button id="VarBtn_'+i+ '" >Generate</button>' +
'</div>' +
'</div>' +
'<img class="p-10" id="GenImg" src = "' + this.url + '">' +
'</div>');
});
});
});
$(document.body).on('click', '#VarBtn', function () {
//Code..
});
I tried to make unique id's for the buttons, so that clicking on the 'VarBtn' button will access the desired button and take the necessary data by unique id from the dropdown menu, but all id's remain the same.
答案1
得分: 2
以下是您提供的代码的翻译部分：
var i = 0;
$('.dropdown').each(function () {
i++;
var newID = 'VarBtn' + i;
$(this).attr('id', newID);
});
$(document).ready(() =>
{
$('#btn').click(function ()
{
var input = {};
input.n = parseInt($('#quantity').val());
input.prompt = $('#txt').val();
input.size = $('#sel').find(":selected").val();
$.ajax({
url: '/Home/GenerateImage',
method: 'post',
contentType: 'application/json',
data: JSON.stringify(input)
}).done(function (data) {
$.each(data.data, function () {
var btnID = 'VarBtn_' + i;
$('#display').append(
'<div class="col-md-3 p-10" style="padding-top:10px">' +
'<div class="dropdown">' +
'<button class="btnV" id="idOne">Dropdown</button>' +
'<div id="myDropdown" class="dropdown-content">' +
'<br>Select size' +
'<select id="Vsel">' +
'<option selected>256x256</option>' +
'<option>512x512</option>' +
'<option>1024x1024</option>' +
'</select>' +
'<br>Enter quantity' +
'<input type="number" id="Vquantity" value="1" min="1" max="10" />' +
'<br>' +
'<button id="' + btnID + '" >Generate</button>' +
'</div>' +
'</div>' +
'<img class="p-10" id="GenImg" src = "' + this.url + '">' +
'</div>');
});
});
});
$(document.body).on('click', '[id^=VarBtn]', function () {
var dropdown = $(this).closest('.dropdown-content');
var input = {};
input.size = dropdown.find('#Vsel').val();
input.quantity = parseInt(dropdown.find('#Vquantity').val());
// do something with input
});
希望这有助于您理解代码。如果您有任何问题或需要进一步的帮助，请随时提问。
英文:
Try this :
var i = 0;
$('.dropdown').each(function () {
i++;
var newID = 'VarBtn' + i;
$(this).attr('id', newID);
});
$(document).ready(() =>
{
$('#btn').click(function ()
{
var input = {};
input.n = parseInt($('#quantity').val());
input.prompt = $('#txt').val();
input.size = $('#sel').find(":selected").val();
$.ajax({
url: '/Home/GenerateImage',
method: 'post',
contentType: 'application/json',
data: JSON.stringify(input)
}).done(function (data) {
$.each(data.data, function () {
var btnID = 'VarBtn_' + i;
$('#display').append(
'<div class="col-md-3 p-10" style="padding-top:10px">' +
'<div class="dropdown">' +
'<button class="btnV" id="idOne">Dropdown</button>' +
'<div id="myDropdown" class="dropdown-content">' +
'<br>Select size' +
'<select id="Vsel">' +
'<option selected>256x256</option>' +
'<option>512x512</option>' +
'<option>1024x1024</option>' +
'</select>' +
'<br>Enter quantity' +
'<input type="number" id="Vquantity" value="1" min="1" max="10" />' +
'<br>' +
'<button id="' + btnID + '" >Generate</button>' +
'</div>' +
'</div>' +
'<img class="p-10" id="GenImg" src = "' + this.url + '">' +
'</div>');
});
});
});
$(document.body).on('click', '[id^=VarBtn]', function () {
var dropdown = $(this).closest('.dropdown-content');
var input = {};
input.size = dropdown.find('#Vsel').val();
input.quantity = parseInt(dropdown.find('#Vquantity').val());
// do something with input
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论