jQuery添加随机类而不重复

Question

我将为您翻译以下有关IT技术的内容。请注意，我会尽力使文本更加通俗易懂，但不保留解释，并且保留HTML标记。

我在网站上使用一个函数来随机添加class到一个div中。虽然这个功能很好，但是我找不到一个方法来避免重复添加相同的class（因为有时候会添加相同的class，我们可能会认为代码没有起作用）...

这是我的jQuery代码：

$("#switch").click(function(){

var classes = ["vert", "escalier","reverse","demi_escalier","demi_escalier_2","ligne" ];

$("#logo").removeClass().addClass(classes[~~(Math.random()*classes.length)]);

});

有人能帮我解决这个问题吗？

谢谢。

- mmdwc

---

你是在说你的 addClass() 函数会重复添加同一个类吗？还是你不想让连续点击执行相同的类？ - Taplar

将生成的数字保存到一个变量中，然后在 while 循环中再次检查它，直到获得另一个数字。 - K.M.

@mmdwc，看下面的Taplar解决方案，那就是我所说的。 - K.M.

使用Jquery的hasClass方法。 - rassa45

addClass() 已经处理了重复的类，所以你说的话并没有什么意义。 - A. Wolff

Answer 1

如果您不希望类重复，可以使用以下方法：

var classes = ["vert", "escalier", "reverse", "demi_escalier", "demi_escalier_2", "ligne"];
var classesCopy = classes.slice();

$('#switch').click(function() {
  if (!classesCopy.length) {
    classesCopy = classes.slice();
  } // once alls classes used up it starts from beginning 
  var classToAdd = classesCopy.splice(Math.floor(Math.random() * classesCopy.length), 1);
  $('.current-class').text('current class: ' + classToAdd);
  $('#logo').removeClass().addClass(classToAdd+'');
});

#logo {
  width: 100px;
  height: 100px;
  background: green;
}

<div class='current-class'></div>
<div id='logo'></div>
<button id='switch'>switch</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

- Bek

---

谢谢你的帮助，但是它还是不起作用...类别已经完全没有改变了... - mmdwc

让我创建可运行的版本。 - Bek

@mmdwc 看一下，你觉得怎么样？ - Bek

它完美地运行了...我将其用在一个函数中，并在 document.ready 和其他 onclick 函数中调用该函数。我不得不将 var 放在函数外面才能使它正常工作。非常感谢！ - mmdwc

Answer 2

//put it in an IIFE so the variables are scoped down
(function(){
    //constants, don't need to declare them in the click function over and over
    var classes = ["vert", "escalier","reverse","demi_escalier"
                   ,"demi_escalier_2","ligne" ];
    //keep track of the last class used, -1 initial so no chance of mismatch
    var lastNumber = -1;
    var $logo = $("#logo");

    $("#switch").on('click', function() {
        //get a new index
        var nextClass = Date.now() * 100 % classes.length;;

        //while they match, keep getting a new one
        while (nextClass === lastNumber) {
            nextClass = Date.now() * 100 % classes.length;
        }

        $logo.removeClass().addClass(classes[nextClass]);
        //save it off so we can do the double check again on the next execution
        lastNumber = nextClass;
    });
})();

- Taplar

---

谢谢您的回复，但不幸的是它没有起作用...有时我会连续两次得到相同的类...您知道为什么吗？ - mmdwc

真的吗？很奇怪。所以如果你在 while 循环后 console.log() nextClass 数字，有时会看到相同的数字两次？ - Taplar