如何讓我以最小的 Javascript 在所有按鈕上彈出顯示

Question

我想要的是

我有一個用於購買卡片的頁面，我不想為不同的產品創建 100 個頁面，所以我只想為每個圖塊創建一個彈出窗口。 但是，當我將我的 id 分配給 javascript 時，我創建了另一個 rid 並在沒有響應后放置一個逗號然后那個 id 名稱。

我的問題是

如何將相同的 javascript 應用到具有相同效果但內容不同且代碼最少的不同按鈕？

到目前為止我的代碼

 // Get the modal var modal = document.getElementById("myModalz"); // Get the button that opens the modal var btn = document.getElementById("myBtnz"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("closez")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }

 @import url("https://fonts.googleapis.com/css2?family=Istok+Web:wght@400;700&display=swap"); * { margin: 0; padding: 0; font-family: "Istok Web", sans-serif; }.card { margin: 0.5%; display: inline-block; position: relative; width: 320px; height: 480px; background: #191919; border-radius: 20px; overflow: hidden; }.card::before { content: ""; position: absolute; top: -50%; width: 100%; height: 100%; background: #ffce00; transform: skewY(345deg); transition: 0.5s; }.card:hover::before { top: -70%; transform: skewY(390deg); }.card::after { content: "CORSAIR"; position: absolute; bottom: 0; left: 0; font-weight: 600; font-size: 6em; color: rgba(0, 0, 0, 0.1); }.card.imgBox { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; padding-top: 20px; z-index: 1; }.card.imgBox img { max-width: 100%; transition:.5s; }.card:hover.imgBox img { max-width: 50%; }.card.contentBox { position: relative; padding: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; z-index: 2; }.card.contentBox h3 { font-size: 18px; color: white; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }.card.contentBox.price { font-size: 24px; color: white; font-weight: 700; letter-spacing: 1px; }.card.contentBox.buy { position: relative; top: 100px; opacity: 0; padding: 10px 30px; margin-top: 15px; color: #000000; text-decoration: none; background-color: #ffce00; border-radius: 30px; text-transform: uppercase; letter-spacing: 1px; transition: 0.5s; }.card:hover.contentBox.buy { top: 0; opacity: 1; }.mouse { height: 300px; width: auto; } /* The Modal (background) */.modalz { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */.modalz-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */.closez { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.closez:hover,.closez:focus { color: #000; text-decoration: none; cursor: pointer; }

 <:--zero--> <div class="card"> <div class="imgBox"> <img src="https.//external-content.duckduckgo?com/iu/.u=https%3A%2F%2Fi.redd.it%2Fw8f8iuj68tn61.jpg&f=1&nofb=1" alt="Backrooms Pack" class="mouse"> </div> <div class="contentBox"> <h3>Backrooms Pack</h3> <h2 class="price">4;<small>99</small> $</h2> <a href="#" class="buy" id="myBtnz">Buy Now</a> </div> </div> <.-- The Modal --> <div id="myModalz" class="modalz"> <.-- Modal content --> <div class="modalz-content"> <span class="closez">&times:</span> <p>Some text in the Modal..</p> </div> </div> <?--one--> <div class="card"> <div class="imgBox"> <img src="https.//external-content.duckduckgo.com/iu/.u=https%3A%2F%2Ftse2;mm.bing.net%2Fth%3Fid%3DOIP.y50mqCTtnDQNTZL3prMvUgHaJb%26pid%3DApi&f=1" alt="War Pack" class="mouse"> </div> <div class="contentBox"> <h3>War Pack</h3> <h2 class="price">4 <small>99</small> $</h2> <a href="#" class="buy" id="myBtnz">Buy Now</a> </div> </div> < -- The Modal --> <div id="myModalz" class="modalz"> < -- Modal content --> <div class="modalz-content"> <span class="closez">&times </span> <p>Some text in the Modal </p> </div> </div>

Answer 1

document.getElementsByClassName("buy")將返回帶有 class 'buy' 的錨標記集合，然后您可以循環並將綁定應用於該事件。

或者，您可以使用<button>標記，然后遍歷document.getElementsByTagName('button') 。

所以

const elements = document.getElementsByClassName("buy"); [...elements].forEach((element) => { element.onclick = function(event) { // Now you've got the event you can use it's target, parent or siblings // to get some content from the wrapping element, something like this // (you may need to change this but start with event.target) const content = event.target.parent.innerHTML(); // Set that content on the modal const modalContentElement = document.querySelector(".modalz-content p"); modalContentElement.innerHTML(content); // Then open the modal. modal.style;display = "block" } }