Question

我正在选择一个类的随机实例。我可以重复相同的实例，但不能背靠背。例如，我可以选择2nd instance, 3rd instance, 2nd instance但不能2nd instance, 2nd instance, 3rd instance这里是我的代码：

<div class="loaded-dev featured-dev initial">
</div>
<div class="loaded-dev featured-dev initial">
</div>
<div class="loaded-dev featured-dev initial">
</div>
<div class="loaded-dev featured-dev initial">
</div>

使用Javascript：

DevRotator = {
        initialDev: '.featured-dev.initial',
        notInitial: '#loaded-devs .featured-dev',
        init: function() {
            setInterval(this.changeDevs.bind(this), 3000);
        },
        changeDevs: function() {

            var devToFlip = [Math.floor(Math.random()*$(this.initialDev).length)];

            $(this.initialDev).removeClass('animated flipInX');
        var randomInitial = $(this.initialDev).eq(devToFlip);
        randomInitial.addClass('animated flipInX');
        randomInitial.clone().appendTo("#loaded-devs").removeClass("initial animated flipInX");


            setTimeout(this.changeDevs, 3000);
        }
    }

这很有效，除非它有时会选择相同的div，这会混淆我的动画。如何继续选择随机div，而不确保相同的div不会背靠背重复？

Answer 1

存储最后选择的div的一种方法是向其添加一个类（或另一个属性）。这是一个我认为以比其他答案更简单的方式获得相同结果的结果：

changeDevs: function() {
    var divNotToFlip = $('div.lastOne');
    var candidateDivs = $('div:not(.lastOne)');
    var divToFlip = candidateDivs.eq(Math.floor(Math.random()*candidateDivs.length));
    divToFlip.addClass('animated flipInX lastOne');
    divNotToFlip.removeClass('lastOne animated flipInX');  //Return the last selected div to the pool
}

注意：我还在changeDevs函数中删除了setTimeout函数。使用此方法，DevRotator对象中不需要新字段来保存最后选择的元素。

Working fiddle

Answer 2

只需存储最后选择的div ...

 lastDiv: -1;
 changeDevs: function() {
     var devToFlip = 1; 
     while (devToFlip == this.lastDiv)
          {devToFlip = [Math.floor(Math.random()*$(this.notInitial).length))]};

Answer 3

我能够在变量中保存最后找到的项目，然后在下次获取div时，从div列表中过滤掉该div，然后从结果中选择一个随机div。

这是它的主要部分

// get a random index that's 1 less than the length of the initDev
// array because we'll be removing an item

var randomInitial = Math.floor(Math.random() * ($(this.initialDev).length - 1));

// get an array that does not include the one we previously used
// and select the item at randomInital
this.lastDiv = $(this.initialDev).filter(function() { return this != self.lastDiv; })[randomInitial];

有关示例，请参阅此working fiddle。

Answer 4

将当前值存储为lastItem，然后为devToFlip生成新的随机值，直至devToFlip ! = lastItem。退出while loop后，将新生成的devToFlip保存为lastItem。

var DevRotator = {
  initialDev: '.featured-dev.initial',
  notInitial: '#loaded-devs .featured-dev',
  lastItem: null,
  devToFlip: null,
  init: function() {
    setInterval(this.changeDevs.bind(this), 100);
  },
  changeDevs: function() {
    this.lastItem = this.devToFlip;
    while (this.devToFlip == this.lastItem) {
      this.devToFlip = Math.floor(Math.random() * $(this.initialDev).length);
    }
    this.lastItem = this.devToFlip;
    $(this.initialDev).removeClass('animated flipInX');
    var randomInitial = $(this.initialDev).eq(this.devToFlip);
    randomInitial.addClass('animated flipInX');
    randomInitial.clone().appendTo("#loaded-devs").removeClass("initial animated flipInX");
  }
};

DevRotator.init();

.animated {
  background-color: red;
}

div {
  background-color: yellow;
  margin: 5px;
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loaded-dev featured-dev initial">
</div>
<div class="loaded-dev featured-dev initial">
</div>
<div class="loaded-dev featured-dev initial">
</div>
<div class="loaded-dev featured-dev initial">
</div>

选择随机＆＃39; eq＆＃39; div但每次都有不同的div

4 个答案: