也許這是個愚蠢的問題，但我無法在這方面取得進展。基本上我需要的是隨機化專案的位置，即專案1采用專案3（或2或4）的樣式，專案2采用1、3、4的樣式，以此類推。
這是我的代碼
。let item = document. querySelectorAll(' .item')
for (let i = 0; i < item.length; i ) {
const getRight = item[i].style.right
const getTop = item[i].style.top.
const getStyles = [getRight, getTop] 。
console.log(`Item${i}, Style: ${getStyles}`）。)
}. items--cloud {
position: relative;
height: 400px;
width: 500px;
background: #333;
}
[data-item] {
position: absolute;
transform: translate3d(var（--x）, var（--y）, 0)。
}<div class="items--cloud">
< div data-item="item-1"/span> class="item-1" style="right: 0%;頂部。40%;">
<img src="https://via. placeholder.com/90x90.?text=item1" alt=">
</div>/span>
< div data-item=" item-2" class=" item-2" style="right: 53%; top: 28%;">
<img src="https://via. placeholder.com/90x90?text=item2" alt=">
</div>/span>
< div data-item=" item-3" class="item-3" style="right: 39%;頂部。4%;">
<img src="https://via. placeholder.com/90x90?text=item3" alt=">
</div>/span>
< div data-item=" item-4" class="item-4" style="right: 79%; top: 26%;">
<img src="https://via. placeholder.com/90x90?text=item4" alt=">
</div>/span>
</div>/span>如果有必要的話，使用jQuery是沒有問題的
。uj5u.com熱心網友回復：
一種方法是為你想使用的每個位置創建一個css規則。
為每個元素分配一個初始位置（確保每個元素有一個不同的位置類）
當洗牌時，你收集應用的位置，從元素中移除它們，洗牌位置陣列并重新應用它們。
shuffleArray陣列函式取自這個"如何隨機化（shuffle）一個JavaScript陣列？"
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor（Math. random() * (i 1)) 。
[array[i], array[j]] = [array[j], array[i]]。
}
}
function shuffelPositions（）{
let items = document.querySelectorAll('.item')
//收集元素現在所處的位置，并洗掉當前的一個。
let positions = Array.from（ items）。 map( item => {
//迭代 item.classLis 并搜索以 `position-`開頭的類。
let positionClass = Array.from（ item.classList）。 find(item => item.match(/^position-/)
//洗掉找到的類。
item.classList.remove(positionClass)
//return it to let the `.map` create the new array containing that class.
return positionClass
})
//shuffel those positions。
shuffleArray(position)
//應用洗牌后的位置。
for (let i = 0; i < items.length; i ) {
items[i].classList.add(position[i])
}
}
document.getElementById('shuffle'/span>)。 addEventListener('click', shuffelPositions) . items--cloud {
position: relative;
height: 400px;
width: 500px;
background: #333;
}
[data-item] {
position: absolute;
transform: translate3d(var（--x）, var（--y）, 0)。
}
.position-1 {
right: 0%; top: 40%。
}
.position-2 {
right: 53%; top: 28%。
}
.position-3 {
right: 39%; top: 4%。
}
.position-4 {
right: 79%; top: 26%;
}<div class=" items--cloud">
< div data-item="item-1" class="item-1 position-1">
<img src="https://via. placeholder.com/90x90.?text=item1" alt=">
</div>/span>
< div data-item="item-2" class="item-2 position-2">
<img src="https://via. placeholder.com/90x90?text=item2" alt=">
</div>/span>
< div data-item="item-3" class="item-3 position-3">
<img src="https://via. placeholder.com/90x90?text=item3" alt=">
</div>/span>
< div data-item="item-4" class="item-4 position-4">
<img src="https://via. placeholder.com/90x90?text=item4" alt=">
</div>/span>
</div>/span>
<button id="shuffle"/span>> shuffle positions</button> function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor（Math. random() * (i 1)) 。
[array[i], array[j]] = [array[j], array[i]]。
}
}
function shuffelPositions（）{
let items = document.querySelectorAll('.item')
//收集元素現在所處的位置，并洗掉當前的一個。
let positions = Array.from（ items）。 map( item => {
return item.dataset.position;
})
//shuffel這些位置。
shuffleArray(position)
//應用洗牌后的位置。
for (let i = 0; i < items.length; i ) {
items[i].dataset.position = positions[i] 。
}
}
document.getElementById('shuffle'/span>)。 addEventListener('click', shuffelPositions) . items--cloud {
position: relative;
height: 400px;
width: 500px;
background: #333;
}
[data-item] {
position: absolute;
transform: translate3d(var（--x）, var（--y）, 0)。
}
[data-position="1"] {
right: 0%; top: 40%。
}
[data-position="2"/span>]{
右。53%; top: 28%。
}
[data-position="3"/span>]{
右。39%; top: 4%。
}
[data-position="4"] {
right: 79%; top: 26%;
}<div class=" items-cloud">
< div data-item="item-1"/span> class="item-1" data-position="1"/span>>
<img src="https://via. placeholder.com/90x90.?text=item1" alt=">
</div>/span>
< div data-item=" item-2" class="item-2" data-position="2">
<img src="https://via. placeholder.com/90x90?text=item2" alt=">
</div>/span>
< div data-item=" item-3" class="item-3" data-position="3">
<img src="https://via. placeholder.com/90x90?text=item3" alt=">
</div>/span>
< div data-item=" item-4" class="item-4" data-position="4">
<img src="https://via. placeholder.com/90x90?text=item4" alt=">
</div>/span>
</div>/span>
<button id="shuffle"/span>> shuffle positions</button> uj5u.com熱心網友回復：
rando.js提供了一個randoSequence函式，使之相當容易
function swapStyles(elements, styles){
if(elements.length < 2) return false。
var randomElements = randoSequence（elements）.slice（-2）。 map((i) => i.value), temp = " ";
for(var i = 0; i < styles.length; i ){
temp = randomElements[0].style[style[i]] 。
randomElements[0].style[style[i]] = randomElements[1].style[i]] 。
randomElements[1].style[style[i]] = temp;
}
}.abs{
position: absolute;
width:100px;
height:50px;
}<script src="https://randojs. com/2.0.0.js"></script>
<button onclick="swapStyles(document. getElementsByClassName('abs'), ['top', 'right']);">點擊交換！</button>
<div class="abs" style=top。 10px;right:10px;background:red;"></div>>
<div class="abs" style=top。 60px;right:120px;background:blue;"></div>>
<div class="abs" style=top。 120px;right:330px;background:green;"></div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/328381.html
標籤：