3

ブートストラップ ボタンを動的に作成することは可能ですか? javascriptを使用して配列を作成するアイテムのリストを含むテキストファイルがあります。それが、各ボタン内のテキストであるアイテムを使用して動的にブートストラップ ボタンを作成したい場所です。テキストファイルに 10 個の項目がある場合、10 個のボタンが作成されます。誰かがそれを行う方法を教えてくれますか、それについてのチュートリアルを教えてくれますか?

EDIT（作成は可能ですが、ボタンが作成されたかどうかを確認するためのコードではありません）：

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>
4

1 に答える 1

7

はい。これはとても簡単だ。

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>

結果 ここに画像の説明を入力

もちろん、ボタンに -handler を割り当てるか、または の代わりに -tagsclickを使用する場合はリンクを割り当てる必要があります。<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 は 1 つだけ作成されます。

于 2013-04-01T10:29:53.133 に答える