Lorsque je clique sur mon bouton, j'essaye de créer une étiquette bootstrap. Mais chaque fois que je clique, il doit commencer à l'étiquette par défaut et passer par le commutateur jusqu'à ce qu'il arrive au dernier, puis revenir au début

Comme indiqué sur l'image ci-dessous, il ne démarre pas à l'étiquette par défaut

enter image description here

Question chaque fois que je clique sur le bouton pour créer un libellé, comment puis-je assurez-vous qu'il ne double pas et démarre à partir de l'étiquette par défaut

DEMO

CODEPEN DEMO

SCÉNARIO

$(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);
    //}
});
1
Mr. ED 1 avril 2017 à 06:16

2 réponses

Meilleure réponse

Je ne sais pas si j'ai mal compris votre question, mais vous utilisez un hasard pour décider quelle étiquette ajouter. Si vous voulez une séquence ordonnée, vous ne devez pas utiliser aléatoire. Code illustré ci-dessous:

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);
  //}
});
1
Yangshun Tay 1 avril 2017 à 03:22

Vous pouvez utiliser un tableau, Array.prototype.slice(), Array.prototype.splice() pour créer une copie du tableau d'origine. Si le tableau copié a .length égal à 0, supprimez le premier élément du tableau, définissez l'élément comme valeur element, sinon obtenez, définissez l'élément aléatoire du tableau copié comme valeur element, répéter la procédure.

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

2
guest271314 1 avril 2017 à 03:55