Klicken Sie hier, um tag/label random zu erstellen, aber beginnen Sie mit label-default

Question

Wenn ich auf meine Schaltfläche klicke, versuche ich ein Bootstrap-Label zu erstellen. Aber jedes Mal, wenn ich klicken Sie auf Label-default beginnen sollte und arbeiten durch den Schalter, bis er zum letzten bekommt man zu Beginn der zurück

Wie auf Bild gezeigt unten, damit er nicht auf Label-default

Anfahren

Frage jedes Mal, wenn ich auf den Button klicken Etikett zu erstellen, wie kann ich es und startet von Label-default

nicht verdoppeln stellen sie sicher,

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

nicht sicher, ob ich Ihre Frage falsch verstanden, aber Sie sind ein zufälliges zu entscheiden, mit welcher hinzuzufügen beschriften. Wenn Sie eine geordnete Sequenz wünschen, sollten Sie keine zufälligen verwenden. Code unten:

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

Sie ein Array verwenden können, Array.prototype.slice(), Array.prototype.splice() eine Kopie der Original-Array zu erstellen. Wenn das kopierte Array .length gleich 0 hat, entfernen Sie das erste Element aus dem Array, legen Sie das Element als element Wert fest, sonst erhalten Sie ein zufälliges Element aus dem kopierten Array als element Wert, Prozedur wiederholen.

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>

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