동적으로 부트 스트랩 버튼 만들기

Question

동적으로 부트 스트랩 버튼을 만들 수 있습니까? 나는 내가 배열을 생성하기 위해 자바 스크립트를 사용할 항목들의 목록을 가지고있는 텍스트 파일을 가지고있다. 그 곳에서 각 버튼 내의 텍스트 인 항목을 동적으로 부트 스트랩 버튼을 만들고 싶습니다. 텍스트 파일에 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> 

Answer 1

예

EDIT (작성 지금은 아니지만 버튼이 생성 된 경우 확인하기위한 코드 가능하다). 많이 쉽다.

는 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 -handler을 할당해야하거나 링크가 당신이 <a>를 사용하는 경우 대신 <button>.

---

업데이트

당신이 특정 텍스트가 이미 존재와 button이는 TextFile.txt가 Button1을 포함하더라도 $.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); 
    } 
    } 
}); 

을 수정할 수 있는지 확인하려면 button2 button3 button3 button3 단추 3 button7 button8는 하나의 단추 3은 button9 button10

만들어집니다.