动态创建Bootstrap按钮

Question

有没有可能动态创建Bootstrap按钮？我有一个文本文件，其中列出了一些项目，我将使用JavaScript创建一个数组。我希望用这些项目作为每个按钮的文本来动态创建Bootstrap按钮。如果文本文件中有10个项目，则会创建10个按钮。有人可以告诉我如何实现或指向一些相关教程吗？

编辑（现在可以创建，但无法检查是否已创建按钮）：

createButtons()：

$(function() {
  $.ajax({
    url : 'http://localhost:8080/SSAD/type.txt',
    dataType : "text",
    success : function (filecontent) {
      var lines=filecontent.split('\n');
      $.each(lines, function() {
        if (this!='') {
            var word = this;
            word = word.toLowerCase().replace(/(?:_| |\b)(\w)/g, function(str, p1) { return p1.toUpperCase();});
            if ($('button:contains("'+word+'")').length==0) {
                var button='<button type="button" class="btn btn-block btn-inverse active" data-toggle="button tooltip" title="Click this to enable/disable viewing of'+this+'" onclick="toggleVisibility('+"'"+this+"'"+')">'+word+'</button>';
                $(".crisisButtons").append(button);
            }
        }
      });
    }
  });
});

HTML:

<button type="button" class="btn btn-block btn-inverse" onclick="createButtons">Click me!</button>

<div class="crisisButtons"></div>

- U.f.O

Answer 1

是的，这非常容易。

textfile.txt

button1
button2
button3
button4
button5
button6
button7
button8
button9
button10

代码

<div id="textfile-buttons"></div>

<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
    url : 'textfile.txt',
    dataType : "text",
    success : function (filecontent) {
      var lines=filecontent.split('\n');
      $.each(lines, function() {
        if (this!='') {
          var button='<button class="btn btn-primary">'+this+'</button>&nbsp;';
          $("#textfile-buttons").append(button);
        }
      });
    }
  });
});
</script>

结果

当然，您需要为按钮分配一个click处理程序，或者如果您使用<a>-标签而不是<button>，则使用链接。

---

更新

如果您想检查是否存在具有特定文本的button，请修改$.each循环。

$.each(lines, function() {
  if (this!='') {
    //check if a button with "this" text not already exists
    if ($('button:contains("'+this+'")').length==0) {
      var button='<button class="btn btn-primary">'+this+'</button>&nbsp;';
      $("#textfile-buttons").append(button);
    }
  }
});

因此，即使textfile.txt中包含 button1 button2 button3 button3 button3 button3 button7 button8 button9 button10

仅会创建一个button3。

- davidkonrad

---

谢谢您的回复。是否有可能检查按钮是否已经被创建，以便不再创建它。例如：通过单击按钮来创建按钮。因此，如果之前已经创建了按钮2，并且如果我点击按钮来创建按钮，则不应再次创建按钮2。 - U.f.O

什么出了问题？你必须具体说明。确定你已经正确地复制和粘贴了吗？ - davidkonrad

我创建了一个按钮，根据文本文件中的项目创建按钮。它将再次创建相同列表的按钮。我还尝试将多个类似条目添加到文本文件中，并且它也会创建它们。唯一的区别是我的变量按钮具有按钮类型。 - U.f.O

不可能猜测。请展示你的代码（编辑问题）。 - davidkonrad