2016-12-05 77 views
3

我有這個骰子數組,改變attribues(srcset)在網格畫廊,我需要它顯示獨特的attribues,直到它耗盡,再次開始,所以我不會看到2,3 ,4個網格中的相同圖像。 感謝您的幫助使隨機骰子數組返回唯一attributres /防止重複

繼承人的jQuery的:

$(function() { 
    //array 
    var dice = $('.attachment-lenslight_squares').map(function() { 
     return $(this).attr('srcset') 
    }).get(); 

    $('.attachment-lenslight_squares') 
     .click(function() { 
      var num = Math.floor(Math.random() * dice.length); 
      $(this).fadeOut(200, function() { 
       $(this).attr('srcset', dice[num]); 
      }).fadeIn(200); 
     }); 

    setInterval(function() { 
     var rand = Math.floor(Math.random() * 15); 
     $('.attachment-lenslight_squares').eq(rand).click(); 
    }, 3000); 

}); 

感謝想法

+1

怎麼樣使用一個數組,因爲它是用來突然離開每個項目?你用'num'來做這件事,但我在PHP中使用這樣的數組做了非常類似的事情,取得了很好的成功。 – staypuftman

+0

這樣做的一種方法是生成一個值的數組,然後使用混洗算法來「隨機化」它們,然後只保留一個指向下一個返回值的指針。 –

回答

1

您可以把使用.not()元素,解構賦值,.html()

var items = $(".items").on("click", "div", function() { 
 
    $(this).fadeOut(200, function() { 
 
    var not = $.map($(".items div").not(this), function(el) { 
 
     return $(el).index(".items div") 
 
    }); 
 
    var next = not[Math.floor(Math.random() * not.length)]; 
 
    var index = $(this).index(".items div"); 
 
    var elems = $(">div", items).toArray(); 
 
    [elems[next], elems[index]] = [elems[index], elems[next]]; 
 
    items.html(elems).find(this).fadeIn(200) 
 
    }); 
 
}); 
 

 
var interval = setInterval(function() { 
 
    items.find("div") 
 
    .eq(Math.floor(Math.random() * items.find("div").length)) 
 
    .click() 
 
}, 3000)
.items div { 
 
    width: 25px; 
 
    height: 25px; 
 
    padding: 4px; 
 
    margin: 1px; 
 
    border: 2px solid #000; 
 
    border-radius: 20%; 
 
    text-align: center; 
 
    font-weight: bold; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> 
 
</script> 
 
<div class="items"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

+0

這太棒了!這是我完全需要它的確切行爲prevetns重複,但動畫有點怪異,有時它淡出,但不會淡入,反之亦然,你知道可能的修復嗎?此外,雖然我有機會問(因爲我找不到任何信息)是否有可能有2或3種不同的動畫,而不是淡入淡出/循環播放或每次使用動畫時隨機更改?非常感謝 ! –

+1

@MartinSprušanský_「有時會淡化,但不會淡入,反之亦然」_你可以創建一個jsfiddle來演示嗎? _「是否有可能擁有2或3種不同於淡入/淡出循環的動畫,或者每次使用動畫時都隨機更改?」_不確定2至3種不同的動畫是什麼意思? – guest271314

+0

動畫是可見的,當我在這裏運行你的代碼,這兩個交換有一些原因不相同的淡出,所以它看起來incosistent,我把它放在與愛的淡入淡出時間的筆,所以它顯而易見我的意思是:http:// codepen.io/nikenko/pen/PbRzwN -bear交換的pari表現如下:一個淡出並剛剛彈出,另一個剛剛彈出並淡入,是否有可能使它們都淡出,並且淡入淡出,看起來一樣嗎? 和2-3animatiopn我的意思是,如果它有可能在這樣的循環中運行動畫:第一個動畫淡入/淡出第二個切換 –

0

創建一個骰子點數範圍內隨機第一;然後從中彈出。

function generateRandomDiceNumbers() { 
    // return array of 6 numbers pushed randomly 
} 

function getRandomDiceRoll (diceNumbers) { 
    // use diceNumbers.pop() 
} 

一個簡單的實現:

function getRandomArbitrary(min, max) { 
    // from mdn 
    return Math.random() * (max - min) + min; 
} 

function getRandomDiceNumbers() { 
    let numbers = []; 
    while(numbers.length < 6){ 
    let r = Math.floor(getRandomArbitrary(1, 7)); 
    if(!numbers.includes(r)) { 
     numbers.push(r); 
    } 
    } 
    return numbers 
} 

var randomDiceNumbers = getRandomDiceNumbers(); 
function getNextRandomDiceNumber(numbers) { 
    if(numbers.length > 0) { 
    return numbers.pop(); 
    } 
} 

// use getNextRandomDiceNumber(randomDiceNumbers); 

希望這是你所期待的。

0
$(function() { 
    var dice = $('.attachment-lenslight_squares').map(function() { 
     return $(this).attr('srcset') 
    }).get(); 

    var used = []; 

    function setNum() { 
     var num = Math.floor(Math.random() * dice.length); 
     if (used.includes(num)) { 
      setNum(); // invokes itself if a used number is detected 
     } 
     used.push(num); // send new unused value to used array for next check 

     $(this).fadeOut(200, function() { 
      $(this).attr('srcset', dice[num]); 
     }).fadeIn(200); 
    }; 

    $('.attachment-lenslight_squares') 
    .click(function() { 
     setNum(); //set random number/invoke sequence on click 
    }); 

    setInterval(function() { 
     var rand = Math.floor(Math.random() * 15); 
     $('.attachment-lenslight_squares').eq(rand).click(); 
    }, 3000); 
}); 

我沒有測試過這一點,但..你可以基本上只需要添加一個遞歸的檢查,以現有的代碼。