動態按鈕與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' 
     }); 
    } 

其結果就會像上述