JQUERY - 建築用HTML列表變量

Question

如何使用列表變量創建大廈HTML ...

這是我的代碼錯誤...

HTML

<div class="demo"> 
    <!-- append code --> 
</div> 

CSS

.demo_btn_btn1 { 
    color :red; 
} 

.demo_btn_btn2 { 
    color :blue; 
} 

.demo_btn_btn3 { 
    color :orange; 
} 

jQuery代碼

$(function(){ 
var cls = ['btn1','btn2','btn3'], 
    txt = ['button1','button2','button3'], 
    html = []; 
    html = $('<button class="demo_btn_' + cls + '"><span>' + txt + '</span></button>'); 
    $(".demo").append(html);  
}); 

這個輸出我的代碼

<div class="demo"> 
    <button class="demo_btn_btn1,btn2,btn3"> 
    <span>button1,button2,button3</span></button> 
</div> 

，我想這...

<div class="demo"> 
    <button class="demo_btn_btn1"><span>Button1</span></button> 
    <button class="demo_btn_btn2"><span>Button2</span></button> 
    <button class="demo_btn_btn3"><span>Button3</span></button> 
</div> 

請HEL p我，謝謝你提前

Answer 1

的事情是，您將所有內容放在一個按鈕中，這就是爲什麼它顯示爲單個元素。

你需要遍歷事物並像下面那樣分配每個元素。

$(function(){ 
 
var cls = ['btn1','btn2','btn3'], 
 
    txt = ['button1','button2','button3'], 
 
    html = []; 
 
    for (let i = 0; i < 3; i++) 
 
    { 
 
     html = $('<button class="demo_btn_' + cls[i] + '">' + txt[i] + '</button>'); 
 
     $(".demo").append(html); 
 
    } 
 
      
 
});

.demo_btn_btn1 { 
 
    color :red; 
 
} 
 

 
.demo_btn_btn2 { 
 
    color :blue; 
 
} 
 

 
.demo_btn_btn3 { 
 
    color :orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="demo"> 
 
    
 
</div>

Answer 2

爲了做到你想要什麼，你將通過陣列一次一個要循環，所以你可以做的是：

$(function(){ 
var cls = ['btn1','btn2','btn3'], 
    txt = ['button1','button2','button3'], 
    for (var i = 0; i < 3; i++) { 
     $(".demo").append(
      $('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>') 
     ); 
    }  
}); 

Answer 3

我會用for循環這種情況。

var cls = ['btn1','btn2','btn3'], 
 
    txt = ['button1','button2','button3']; 
 

 
for (var i = 0; i < cls.length; i++) { 
 
    $(".demo").append('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>'); 
 
}

.demo_btn_btn1 { 
 
    color :red; 
 
} 
 

 
.demo_btn_btn2 { 
 
    color :blue; 
 
} 
 

 
.demo_btn_btn3 { 
 
    color :orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="demo"> 
 
    <!-- append code --> 
 
</div>

Answer 4

您可以簡單地使用.each()通過數組循環..和+=爲HTML然後循環使用後.html()

$(function(){ 
 
    var html = ''; 
 
    cls = ['btn1','btn2','btn3'], 
 
    txt = ['button1','button2','button3']; 
 
    $.each(cls , function(i){ 
 
    html += '<button class="demo_btn_' + cls[i] + '"><span>' + txt[i] + '</span></button>'; 
 
    }); 
 
    $(".demo").html(html);  
 
});

.demo_btn_btn1 { 
 
    color :red; 
 
} 
 

 
.demo_btn_btn2 { 
 
    color :blue; 
 
} 
 

 
.demo_btn_btn3 { 
 
    color :orange; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="demo"> 
 
    <!-- append code --> 
 
</div>

Answer 5

嘗試使用循環，並創建新的HTML元素ents基於cls和txt的索引。從我的手機發帖，如果格式化混亂，請致歉。

$(function(){ 
    var cls = ['btn1','btn2','btn3'], 
    txt = ['button1','button2','button3']; 
    for (var i =0; i < cls.length; i++){ 
     var html = $('<button class="demo_btn_' + cls[i] + '"><span>' + txt[i]+ '</span></button>'); 
     $(".demo").append(html);  
    } 
});