Question

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

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

开始

问题每次点击按钮创建标签我该怎么办？确保它没有加倍并从label-default
开始

样本

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

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

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

单击以创建标签/标签随机，但从label-default开始

2 个答案: