dynamische Schaltfläche mit jquery

Question

Ich habe eine dynamische Schaltfläche erstellt. Der Wert aller Schaltflächen ist jedoch gleich. Was soll ich dafür tun? Ich möchte, dass jeder verschiedene Werte hat.

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

Sie können Index verwenden, um den Wert jeder Taste zu ändern. Sehen Sie, ob das hilft.

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

sollten Sie die Zeichenfolge ändern:

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

Für etwas wie folgt aus:

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

So haben Sie: neue Taste-1, neue Taste-2 .... Hope that help

Answer 3

Wenn Sie nur nur unterschiedliche Namen setzen müssen, da nur Sie mit dem Index spielen

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' 
    }); 
} 

es so

führen oder sonst können Sie Verwenden Sie ein benutzerdefiniertes Array, um einige Namen mit den entsprechenden Indizes

zu behalten

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' 
     }); 
    } 

das Ergebnis wird so sein, über