每次隨機選擇div的div而不是div

我正在選擇一個類的隨機實例。我可以重複同樣的事例，但不會背對背。例如，我可以選擇2nd instance, 3rd instance, 2nd instance但不2nd instance, 2nd instance, 3rd instance這裏是我的代碼：每次隨機選擇div的div而不是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> 
<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，這打亂了我的動畫這個偉大的工程。我怎樣才能繼續選擇隨機股利，而不確定相同的股利不會重複背靠背？

來源

2017-04-11 JordanBarber

一種方法商店最後選定的格是一類（或另一屬性）添加到其中。這是我認爲達到相同的結果比其他的答案更簡單的方式採取：

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

來源

2017-04-11 18:48:51 jrook

只儲存最後選定格...

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

來源

2017-04-11 16:23:29 Paflow

謝謝你的迴應，但這並不能解決問題。我仍然有divs被重複。事實上，這只是一遍又一遍地選擇相同的div。 – JordanBarber

我注意到這個答案中的randomizer行有'this.notInitial'，而原來有'this.initialDev' ... – Kev

謝謝@Kev我更新了原始問題。 – JordanBarber

我能保存在變量最後找到的項目，那麼它得到一個div，下一次過濾掉從列表格divs，然後從結果中選擇一個隨機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的一個例子。

來源

2017-04-11 16:51:18 HoofHarted

將當前值存儲爲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>

來源

2017-04-11 18:10:23 Himanshu

每次隨機選擇div的div而不是div

回答

相關問題