單擊以創建標籤/標籤隨機但從標籤默認開始

Question

當我單擊我的按鈕時，我正嘗試創建引導標籤。但每次我點擊它應該從標籤默認開始，並通過開關工作，直到它到達最後一個回去開始

如下圖中所示，它不是從標籤默認開始

問題我每次點擊按鈕即可創建標籤，我怎麼能 確保它不會增加一倍，並將其從標籤默認啓動

DEMO

CODEPEN DEMO

SCRIPT

$(document).on('click', '#category_button', function(e){  

    e.preventDefault(); 

    //if ($("#label-" + category_name).length == 0) { 

     var rand = Math.floor((Math.random() * 5) + 1); 

     switch(rand){ 
      case 1: 
      element = 'label-default'; 
      break; 
      case 2: 
      element = 'label-primary'; 
      break; 
      case 3: 
      element = 'label-success'; 
      break; 
      case 4: 
      element = 'label-info'; 
      break; 
      case 5: 
      element = 'label-warning'; 
      break; 
     } 

     html = ''; 
     html += '<li id="">'; 
     html += '<span class="label ' + element + '">'; 
     html += 'Hello'; 
     html += '</span>'; 
     html += '</li>'; 

     $('.categories ul').append(html); 
    //} 
}); 

Answer 1

不知道如果我誤解了你的問題，但你使用的是隨機決定哪些標籤添加。如果你想要一個有序的序列，你不應該使用隨機的。如下圖所示代碼：

var counter = 0; 
$(document).on('click', '#category_button', function(e){ 
    e.preventDefault(); 
    switch(counter) { 
     case 0: 
     element = 'label-default'; 
     break; 
     case 1: 
     element = 'label-primary'; 
     break; 
     case 2: 
     element = 'label-success'; 
     break; 
     case 3: 
     element = 'label-info'; 
     break; 
     case 4: 
     element = 'label-warning'; 
     break; 
    } 

    counter = (counter + 1) % 5; 

    var html = ''; 
    html += '<li id="">'; 
    html += '<span class="label ' + element + '">'; 
    html += 'Hello'; 
    html += '</span>'; 
    html += '</li>'; 

    $('.categories ul').append(html); 
    //} 
}); 

Answer 2

您可以使用數組，Array.prototype.slice()，Array.prototype.splice()創建原始數組的一個副本。如果複製數組有.length等於0從數組中刪除第一個元素，則將該元素設置爲element值，否則獲取，將複製數組中的隨機元素設置爲element值，重複過程。

var arr = ["default", "primary", "success", "info", "warning"]; 
 
var label = "label-"; 
 
var copy = []; 
 

 
$(document).on("click", "#category_button", function(e) { 
 

 
    e.preventDefault(); 
 

 
    var element, rand; 
 

 
    if (!copy.length) { 
 
    copy = arr.slice(0); 
 
    element = copy.splice(0, 1); 
 
    } else { 
 
    rand = Math.floor(Math.random() * copy.length); 
 
    element = copy.splice(rand, 1); 
 
    } 
 

 
    var html = $("<li>", { 
 
    "id":"", 
 
    "html":$("<span>", { 
 
      "class": label.slice(0, -1).concat(" ", label, element), 
 
      "html": label + element 
 
      }) 
 
    }); 
 

 
    $(".categories ul").append(html); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<button id="category_button">click</button> 
 
<div class="categories"> 
 
    <ul> 
 
    </ul> 
 
</div>

codepen http://codepen.io/anon/pen/PpXryW