javascript - 单击以随机创建标记/标签，但从标签默认值开始

Question

当我点击我的按钮时，我正在尝试创建一个 Bootstrap 标签。但是每次我点击它应该从标签默认开始并通过开关工作直到它到达最后一个回到开头

如下图所示，它不是从 label-default 开始的

Question each time I click on the button to create label how can I make sure it does not double up and starts from label-default

演示

CODEPEN DEMO

脚本

$(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

您可以使用数组、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