动态按钮与jQuery

Question

我创建了一个动态按钮。但所有按钮的价值都是一样的。我应该为此做些什么？我希望每个人都有不同的价值观。

for (var i = 0; i <= 11; i++) { 
 
    var r = $('<input type="button" value="new button" style="margin-left:10px; margin-top:5px;"/>'); 
 
    $("#sth").append(r); 
 

 
    $("#sth").css({ 
 
    width: '300px', 
 
    'padding-top': '10px', 
 
    'padding-bottom': '10px', 
 
    'padding-left': '10px' 
 
    }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<div id="sth"></div>

Answer 1

你可以使用索引来改变每个按钮的值。看看这是否有帮助。

for (var i = 0; i <= 11; i++) { 
 
     var r = $('<input type="button" value="new button ' + i + '" style="margin-left:10px; margin-top:5px;"/>'); 
 
     $("#sth").append(r); 
 
} 
 
$("#sth").css({ width: '300px', 'padding-top': '10px', 'padding-bottom': '10px', 'padding-left':'10px' });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div id='sth'></div>

Answer 2

您应该更改您的字符串：

$('<input type="button" value="new button" style="margin-left:10px; margin-top:5px;"/>'); 

这样的事情：

$('<input type="button" value="new button-' + i + '" style="margin-left:10px; margin-top:5px;"/>'); 

所以你将有：新的按钮-1，新的按钮-2 .... 希望帮助

Answer 3

如果你需要把才刚刚不同的名称有你只是用食指玩

for (var i = 0; i <= 11; i++) { 
var r = $('<input type="button" value="Button_"' + i + '"style="margin-left:10px; margin-top:5px;"/>'); 
$("#sth").append(r); 

    $("#sth").css({ 
    width: '300px', 
    'padding-top': '10px', 
    'padding-bottom': '10px', 
    'padding-left': '10px' 
    }); 
} 

这将导致这样

，否则你可以使用自定义数组保留一些带有相应索引的名称

var arr = ['apple','orange','pineapple','tomato','grapes','ginger','ghee','sugar','milk','brinjal','potato'],name; 
for (var i = 0; i <= 11; i++) { 
    name = arr[i] ? arr[i] : 'button_'+ i; 
    var r = $('<input type="button" value="' + name + '"style="margin-left:10px; margin-top:5px;"/>'); 
    $("#sth").append(r); 

     $("#sth").css({ 
     width: '300px', 
     'padding-top': '10px', 
     'padding-bottom': '10px', 
     'padding-left': '10px' 
     }); 
    } 

其结果就会像上述