单击以随机创建标签/标签，但从标签默认开始答案

【问题标题】：Click to create tag / label random but start from label-default单击以随机创建标签/标签，但从标签默认开始
【发布时间】：2017-04-01 03:16:48
【问题描述】：

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

如下图所示，它不是从标签默认开始的

问题每次我点击按钮创建标签时我怎么能确保它不会加倍并从 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);
    //}
});

【问题讨论】：

这是您生成的随机数的问题。如果你想要一个循环，你可以尝试使用一些计数器
或者你可以试试这个stackoverflow.com/a/15585372/2445295
比为什么你使用random??

标签： javascript jquery

【解决方案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>

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

【讨论】：

【解决方案2】：

不确定我是否误解了您的问题，但您正在使用随机来决定添加哪个标签。如果你想要一个有序的序列，你不应该使用随机的。代码如下：

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);
  //}
});

【讨论】：