建議或庫隨機換出一個div集合，一次？

有沒有人有任何建議或圖書館，我可以用來隨機從徽標集合中換出一個標誌？建議或庫隨機換出一個div集合，一次？

簡化結構：

<div class="container"> 
    <div class="graybox" id="logo1"></div> 
    <div class="graybox" id="logo2"></div> 
    <div class="graybox" id="logo3"></div> 
    <div class="graybox" id="logo4"></div> 
    <div class="graybox" id="logo5" style="display:none;"></div> 
    <div class="graybox" id="logo6" style="display:none;"></div> 
    <div class="graybox" id="logo7" style="display:none;"></div> 
</div>

一種更加直觀的指導筆：

http://codepen.io/rjschill/pen/rrBaYo

這是我想要建立一個非常簡化的版本 - 有一個容器這將持有一定數量的標誌。在這種情況下，顯示4個徽標，另外3個隱藏。

我想要做的事：

隨機掉出隱藏層的可見的div的一個，並繼續在隨機循環通過。

我很難形成一個解決問題的方法，所以任何建議指向正確的方向寫一個解決方案，或者一個庫，實現我所期待的將不勝感激。

來源

2016-08-30 R. Jacobs

？ –

沒有條件或電話交換出來;我最初以爲我會設置一個間隔，每隔10秒左右換一次。 –

$.fn.random = function() { return this.eq(Math.random() * this.length | 0) } 
 
setInterval(function() { 
 
    $(".show").random().add($(".hide").random()).toggleClass("show hide"); 
 
}, 1000);

.hide { visibility: hidden }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="show">1</span> 
 
<span class="show">2</span> 
 
<span class="show">3</span> 
 
<span class="show">4</span> 
 
<span class="hide">5</span> 
 
<span class="hide">6</span> 
 
<span class="hide">7</span>

來源

2016-08-30 00:29:31 4castle

<div class="graybox"> 
    <div class="inner"> 
    First Box 
    </div> 
</div> 
<div class="graybox"> 
    <div class="inner"> 
    Second Box 
    </div> 
</div> 
<div class="graybox"> 
    <div class="inner"> 
    Third Box 
    </div> 
</div> 
<div class="graybox" style="display:none"> 
    <div class="inner"> 
    Fourth Box 
    </div> 
</div> 
<div class="graybox" style="display:none"> 
    <div class="inner"> 
    Fifth Box 
    </div> 
</div>

的Javascript：

//Cache elements 
var $boxes = $(".graybox"), 
    $visible = $boxes.filter(":visible"), 
    $hidden = $boxes.filter(":hidden"), 
    $targetVisible, $targetHidden, interval; 


interval = window.setInterval(function(){ 
    //Get a random hidden and visible container 
    $targetVisible = $visible.eq(Math.floor(Math.random() * $visible.length)), 
    $targetHidden = $hidden.eq(Math.floor(Math.random() * $hidden.length)); 
    $targetVisible 
    .children() 
    .replaceWith($targetHidden.children()) //Swap the childs, eg. .inner 
     .appendTo($targetHidden); //Append hidden element to visible 
}, 1000);

能在CodePen

來源

2016-08-30 00:51:36

HTML代碼

可見0

<div class="container"> 
     <div class="graybox" id="logo1">1</div> 
     <div class="graybox" id="logo2">2</div> 
     <div class="graybox" id="logo3">3</div> 
     <div class="graybox" id="logo4">4</div> 
     <div class="graybox" id="logo5" style="display:none;">5</div> 
     <div class="graybox" id="logo6" style="display:none;">6</div> 
     <div class="graybox" id="logo7" style="display:none;">7</div> 
</div>

JS在什麼條件下換出或顯示代碼

$(document).ready(function() 
{ 
    setTimeout(function() 
    { 
     //get .container all visible children 
     var visibleDiv = $(".container :visible"), 
     //get .container all hidden children 
      hiddenDiv = $(".container :hidden"); 
     //get a number of 0 to visibleDiv.length-1 
     var v = getRandomInteger(0,visibleDiv.length-1), 
      h = getRandomInteger(0,hiddenDiv.length-1); 
     //toggle() if element is visible then hidden,if element is hidden then visible 
     visibleDiv.eq(v).toggle(); 
     hiddenDiv.eq(h).toggle(); 
     if(getRandomInteger(0,20)!=10) 
     { 
      setTimeout(arguments.callee,1000); 
     } 
    },1000) 
}) 
function getRandomInteger(min,max) 
{ 
    return Math.floor(Math.random()*(max-min+1))+min 
}

來源

2016-08-30 01:11:57

建議或庫隨機換出一個div集合，一次？

回答

相關問題