慕標(biāo)5832272
2022-11-27 17:27:21
如果我在這里弄錯(cuò)了術(shù)語,我深表歉意。我在 html 中有一個(gè)圖像“網(wǎng)格”,我想使用 jQuery 隨機(jī)淡入每個(gè)元素。網(wǎng)格中的一項(xiàng)是徽標(biāo) - 我希望它最后淡出。網(wǎng)格大小可以更改,“徽標(biāo)”的位置也可以不同。這是列表的簡(jiǎn)化輸出。<ul id="homepage-grid" class="projectsgrid row"> <div id="item1"> <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('15376.jpg')"> </a> </div> <div id="item2"> <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('15376.jpg')"> </a> </div> <div id="itemlogo" style="opacity: 0;"> <a href="#" class="block" style="padding-bottom: 100%;"> <div style="background-image:url('logoonly.png')" title="" class="logoblock"></div> </a> </div> <div id="item4"> <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('43576.jpg')"> </a> </div> <div id="item5"> <a href="http://website.com/" class="block" style="padding-bottom: 100%;background:url('15346.jpg')"> </a> </div></ul>我有以下腳本,它將元素收集到一個(gè)數(shù)組中。但我無法弄清楚如何將元素與集合中的“itemlogo”ID 匹配以將其拆分并將其推到數(shù)組的末尾,以便它最后“淡入”。我試過“div#itemlogo”、“#itemlogo”、“itemlogo”,但似乎沒有任何匹配項(xiàng),也許我不知道我正在做的事情的名稱,我找不到任何參考。var elems = $('#homepage-grid > div').get(); // collect elementsconsole.log(elems); for (var i = elems.length - 1; i > 1; i--) { // Shuffle the order var j = Math.floor(Math.random() * (i + 1)); var elem = elems[j]; elems[j] = elems[i]; elems[i] = elem; } elms = elems.push(elems.splice(elems.indexOf('div#itemlogo'), 1)[0]); // pull logo to last?? var i = 0; var timer = setInterval(function() { // animate fade them sequentially console.log(elems[i]).id(); $(elems[i]).fadeTo( "slow" , 1); if (i === elems.length) { clearInterval(timer); } i++; }, 150);
1 回答

小唯快跑啊
TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊
你走在正確的道路上,但這里的關(guān)鍵是你需要find一個(gè)特定的項(xiàng)目。這些項(xiàng)目是 DOM 元素,而不是字符串或選擇器本身。
elems.push(
elems.splice(
elems.findIndex(node=>node.id === 'itemlogo'),
1
)[0]
);
findIndex允許您傳遞一個(gè)函數(shù),該函數(shù)應(yīng)true為您想要的項(xiàng)目返回 - 在這種情況下,您需要 ID 為 的項(xiàng)目itemlogo。其余的只是你已經(jīng)擁有的相同的推拼接?xùn)|西。
我還要表揚(yáng)你對(duì)數(shù)組改組的正確使用。您可以通過解構(gòu)稍微簡(jiǎn)化它:
[elems[i], elems[j]] = [elems[j], elems[i]];
添加回答
舉報(bào)
0/150
提交
取消