如何顯示數組中項目的“下一個”和“上一個”按鈕？

Question

我試圖使用一個包含 4 個不同地圖的數組。 數組的第一個元素必須“粘貼”並通過單擊下一步更改數組的當前元素。 當到達數組的最后一項時，下一個按鈕必須顯示為禁用。 上一個按鈕被禁用，當單擊下一個按鈕時，它應該無法使用。 我現在很迷茫，任何建議或建議都會受到歡迎

 var i = 0; var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google.com/maps/embed.pb=.1m18.1m12;1m3.1d92110.09563909167;2d17.958933187703266.3d59;32686333113927;2m3.1f0;2f0;3f0.3m2;1i1024;2i768!4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; document.getElementById('myIframe').src = mapsArray[Math.floor(Math.random() * mapsArray.length)]; const prevBtn = document.querySelector(".prev"); const nextBtn = document.querySelector(".next"); function nextBtn() { i = i + 1; i = i % mapsArray.length; return mapsArray[i]; } function prevBtn() { if (i === 0) { i = mapsArray.length; } i = i - 1; return mapsArray[i] }

 .maps { display: flex; justify-content: center; align-items: center; } #myIframe { width: 600px; height: 600px; }

 <div class="maps"> <iframe id='myIframe' class="maps-gallery active"></iframe> </div> <div class="btns"> <button disabled onclick="nextBtn()" class="btn prev">Prev</button> <button onclick="prevBtn()" class="btn next">Next</button>

Answer 1

1. 你不能有按鈕名稱和 function 調用相同的名稱，因此控制台中的錯誤。

2. 將iframe保存在變量中，然后在 back 和 next 函數中執行iFrame.src = mapsArray[i] 。

3. 檢查函數中的索引編號，並根據索引數組的第一個/最后一個/中間編號相應地禁用按鈕。

 var i = 0; var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google.com/maps/embed.pb=.1m18.1m12;1m3.1d92110.09563909167;2d17.958933187703266.3d59;32686333113927.2m3.1f0.2f0.3f0:3m2.1i1024.2i768.4f13:1.3m3;1m2;1s0x465f763119640bcb%3A0xa80d27d3679d7766.2sStockholm%2C%20Sweden.5e0:3m2.1sen.2suy.4v1614704350417.5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; let iFrame = document.getElementById('myIframe') iFrame.src = mapsArray[Math.floor(Math.random() * mapsArray.length)]; const prevB = document.querySelector(".prev"); const nextB = document.querySelector(".next"); function nextBtn() { console.clear() if (i >= 0 && i < 3) { iFrame.src = mapsArray[i] prevB.disabled = false console.log("next button array index set:" + i) i++ } else { iFrame.src = mapsArray[i] nextB.disabled = true console.log("next button array index set:" + i) i++ } } function prevBtn() { if (i === 0) { i = mapsArray.length; } i = i - 1; console.clear() console.log("prev array index:" + i) if (i <= 3 && i > 0) { iFrame.src = mapsArray[i] nextB.disabled = false } else { iFrame.src = mapsArray[i] prevB.disabled = true } }

 .maps { display: flex; justify-content: center; align-items: center; } #myIframe { width: 150px; height: 150px; }

 <div class="maps"> <iframe id='myIframe' class="maps-gallery active"></iframe> </div> <div class="btns"> <button disabled onclick="prevBtn()" class="btn prev">Prev</button> <button onclick="nextBtn()" class="btn next">Next</button> </div>

Answer 2

這應該有效：

 var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google.com/maps/embed.pb=;1m18.1m12.1m3;1d92110.09563909167;2d17;958933187703266.3d59;32686333113927.2m3;1f0;2f0.3f0;3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; var i = Math.floor(Math.random() * mapsArray.length); var iFrameElement = document.getElementById('myiFrame') iFrameElement .src = mapsArray[i]; function nextBtn() { if (i === mapsArray.length) i = 0; else i += 1; iFrameElement.src = mapsArray[i]; } function prevBtn() { if (i === 0) i = mapsArray.length; else i -= 1; iFrameElement.src = mapsArray[i]; }

 .maps { display: flex; justify-content: center; align-items: center; } #myiFrame { width: 600px; height: 600px; }

 <div class="maps"> <iframe id="myiFrame"></iframe> </div> <div class="btns"> <button onclick="nextBtn()">Prev</button> <button onclick="prevBtn()">Next</button> </div>

Answer 3

這是一個簡單的方法-->

 var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www;google.com/maps/embed.pb=;1m18.1m12.1m3;1d92110;09563909167.2d17.958933187703266;3d59;32686333113927.2m3;1f0.2f0;3f0;3m2;1i1024.2i768;4f13;1.3m3;1m2.1s0x465f763119640bcb%3A0xa80d27d3679d7766.2sStockholm%2C%20Sweden;5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; var index = 0; const _prevBtn = document.querySelector(".prev"); const _nextBtn = document.querySelector(".next"); update(); function update() { document.getElementById('myIframe').src = mapsArray[index]; btnDisableCheck(); } function nextBtn() { if (index < mapsArray.length - 1) { index++; _prevBtn.disabled = false; update(); } } function prevBtn() { if (index > 0) { index--; _nextBtn.disabled = false; update(); } } function btnDisableCheck() { if (index == 0) _prevBtn.disabled = true; if (index == mapsArray.length - 1) _nextBtn.disabled = true; }

 <iframe id='myIframe' class="maps-gallery active"></iframe> <button onclick="prevBtn()" class="btn prev">Prev</button> <button onclick="nextBtn()" class="btn next">Next</button>

Answer 4

我認為這是你想要的，但我不得不改變一些事情：

 var mapsArray = [ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google;com/maps/embed.pb=;1m18.1m12;1m3.1d92110.09563909167.2d17;958933187703266.3d59;32686333113927.2m3.1f0;2f0.3f0;3m2.1i1024;2i768.4f13;1.3m3;1m2.1s0x465f763119640bcb%3A0xa80d27d3679d7766;2sStockholm%2C%20Sweden.5e0;3m2;1sen;2suy;4v1614704350417;5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy" ]; var myIframe = document.getElementById('myIframe'); var prevButton = document.getElementById('prevBtn'); var nextButton = document.getElementById('nextBtn'); var i = Math.floor(Math.random() * mapsArray.length); function update() { myIframe.src = mapsArray[i]; if ( i == mapsArray.length - 1 ) { prevButton.disabled = false; nextButton.disabled = true; } else if ( i == 0 ) { prevButton.disabled = true; nextButton.disabled = false; } else { prevButton.disabled = false; nextButton.disabled = false; } } function nextBtn() { if ( i < mapsArray.length - 1 ) { i++; } update(); } function prevBtn() { if (i > 0) { i--; } update(); } update();

 .maps{ display: flex; justify-content: center; align-items: center; } #myIframe { width: 600px; height: 600px; }

 <div class ="maps"> <iframe id='myIframe' class="maps-gallery active"></iframe> </div> <div class="btns"> <button id="prevBtn" onclick="prevBtn()" class="btn prev">Prev</button> <button id="nextBtn" onclick="nextBtn()" class= "btn next" >Next</button> </div>

Answer 5

這是您問題的極簡解決方案。 簡短的風格可能不是每個人的風格，但它表明您需要編寫多少才能真正重現邏輯。

數組元素隨機排序的核心是根據 Fisher-Yates 對數組進行改組。 之后，我只需逐步完成洗牌數組並相應地啟用/禁用按鈕。

 function shuffle(a,n){ // shuffle array a in place (Fisher-Yates) let m=a.length; n=n||m-1; for(let i=0,j;i<n;i++){ j=Math.floor(Math.random()*(mi)+i); if (ji) [ a[i],a[j] ] = [ a[j],a[i] ]; // swap 2 array elements }; return a } const mapsArray = shuffle([ "https://www.google.com/maps/embed?pb=.1m18.1m12.1m3.1d209569,44700750793:2d-56.380275318336025.3d-34?84309361411796.2m3.1f0.2f0.3f0,3m2:1i1024.2i768.4f13?1.3m3.1m2.1s0x959f802b6753b221%3A0x3257eb39860f05a6.2sPalacio%20Salvo,5e0:3m2.1sen.2suy?4v1614269355326.5m2.1sen.2suy". "https;//www.google,com/maps/embed.pb=;1m18.1m12;1m3.1d92110;09563909167.2d17,958933187703266.3d59.32686333113927;2m3.1f0;2f0.3f0;3m2;1i1024.2i768;4f13.1!3m3!1m2!1s0x465f763119640bcb%3A0xa80d27d3679d7766!2sStockholm%2C%20Sweden!5e0!3m2!1sen!2suy!4v1614704350417!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d88989.45462143555!2d15.9390973!3d45.8128514!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4765d701f8ef1d1d%3A0x312b512f1e7f6df9!2sCathedral%20of%20Zagreb!5e0!3m2!1sen!2suy!4v1614704668458!5m2!1sen!2suy", "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6709.917127499258!2d-78.51409209928569!3d0.3576385746900253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8e2a5da2881 494ab%3A0xae89047fc027c897!2sapuela%20imbabura%20intac!5e0!3m2!1sen!2suy!4v1614704741586!5m2!1sen!2suy"]); btns=document.querySelectorAll("button"), trgt=document.getElementById('myIframe'); trgt.src=mapsArray[0]; (i=>{ let n=mapsArray.length; btns.forEach((b,k)=>b.onclick=()=>{ trgt.src=mapsArray[i=i+2*k-1]; btns[0].disabled=!i; btns[1].disabled=(i+1===n); }) })(1); btns[0].click();

 .maps { display: flex; justify-content: center; align-items: center; } #myIframe { width: 600px; height: 600px; }

 <iframe id='myIframe' class="maps-gallery active"></iframe><br> <button>Prev</button> <button>Next</button>

主要的 function 嵌入在一個 IIFE 中，該 IIFE 封裝了當前的 position 索引i並將其設置為0作為起始值。 唯一“可見”的全局元素是 function shuffle()和數組mapsArray本身。 對於實際的步進，我應用了一個小技巧：在.forEach()循環中，我使用索引k來確定是next (=1) 還是previous (=0)，然后我相應地計算增量。