带有jquery的动态按钮

Question

我创建了一个动态按钮。但是所有按钮的价值都是一样的。我该怎么办呢？我希望每个人都有不同的价值观。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用index更改每个按钮的值。看看这是否有帮助。

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

如果您只需要放置不同的名称，那么您只需使用索引

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

其结果如上所述

Answer 3

你应该在这里改变你的字符串：

$('<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;"/>');

所以你将拥有：new button-1，new button-2 .... 希望有所帮助