如何使用 for、forEach 或 map() 清理這段代碼？

Question

這是我在 stackOverFlow 的第一個問題。
https://www.techiesys.in/websites/surya/shop-single.html
請在此處查看演示。 代碼運行良好，我知道我編碼最差。
我將把代碼片段放在這里。

 const changeItem1 = document.getElementById("changeitem1"); const changeItem2 = document.getElementById("changeitem2"); const changeItem3 = document.getElementById("changeitem3"); const changeItem4 = document.getElementById("changeitem4"); function firstChange() { changeItem1.classList.remove("d-none"); changeItem2.classList.add("d-none"); changeItem3.classList.add("d-none"); changeItem4.classList.add("d-none"); } function secondChange() { changeItem2.classList.remove("d-none"); changeItem1.classList.add("d-none"); changeItem3.classList.add("d-none"); changeItem4.classList.add("d-none"); } function thirdChange() { changeItem3.classList.remove("d-none"); changeItem1.classList.add("d-none"); changeItem2.classList.add("d-none"); changeItem4.classList.add("d-none"); } function fourthChange() { changeItem4.classList.remove("d-none"); changeItem1.classList.add("d-none"); changeItem2.classList.add("d-none"); changeItem3.classList.add("d-none"); } const changeFramee1 = document.getElementById("changeframee1"); const changeFramee2 = document.getElementById("changeframee2"); const changeFramee3 = document.getElementById("changeframee3"); const changeFramee4 = document.getElementById("changeframee4"); function f1Change() { changeFramee1.classList.remove("d-none"); changeFramee2.classList.add("d-none"); changeFramee3.classList.add("d-none"); changeFramee4.classList.add("d-none"); } function f2Change() { changeFramee2.classList.remove("d-none"); changeFramee1.classList.add("d-none"); changeFramee3.classList.add("d-none"); changeFramee4.classList.add("d-none"); } function f3Change() { changeFramee3.classList.remove("d-none"); changeFramee1.classList.add("d-none"); changeFramee2.classList.add("d-none"); changeFramee4.classList.add("d-none"); } function f4Change() { changeFramee4.classList.remove("d-none"); changeFramee1.classList.add("d-none"); changeFramee2.classList.add("d-none"); changeFramee3.classList.add("d-none"); }

 <div class="content-side col-lg-8 col-md-12 col-sm-12"> <div class="shop-single"> <div class="product-details"> <.--Basic Details--> <div class="basic-details"> <div class="row clearfix"> <div class="image-column col-md-6 col-md-6 col-sm-12 position-relative"> <div id="changeframee1"> <img src="./images/framee.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <div id="changeframee2" class="d-none"> <img src="./images/framee2.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <div id="changeframee3" class="d-none"> <img src="./images/framee3.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <div id="changeframee4" class="d-none"> <img src="./images/framee4.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <figure class="image-box" id="changeitem1"><a href="#" data-toggle="modal" data-target="#exampleModal" class="lightbox-image" title="FRP Doors"><img src="images/00.png" alt=""></a> </figure> <figure class="image-box d-none" id="changeitem2"><a href="#" data-toggle="modal" data-target="#exampleModal2" class="lightbox-image" title="FRP Doors"><img src="images/9.png" alt=""></a> </figure> <figure class="image-box d-none" id="changeitem3"><a href="#" data-toggle="modal" data-target="#exampleModal3" class="lightbox-image" title="FRP Doors"><img src="images/3.png" alt=""></a> </figure> <figure class="image-box d-none" id="changeitem4"><a href="#" data-toggle="modal" data-target="#exampleModal4" class="lightbox-image" title="FRP Doors"><img src="images/10.png" alt=""></a> </figure> <div class="changebtns mt-5"> <button onclick="firstChange()"><img src="images/00.png" alt=""></button> <button onclick="secondChange()"><img src="images/9.png" alt=""></button> <button onclick="thirdChange()"><img src="images/3.png" alt=""></button> <button onclick="fourthChange()"><img src="images/10.png" alt=""></button> </div> </div> <div class="info-column col-md-6 col-md-6 col-sm-12 pl-0 pl-md-5"> <div class="details-header"> <h4>FRP Doors</h4> <div class="rating"> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star-half-empty"></span> </div> <div class="item-price">$29.00</div> </div> <div class="text">Not every fiberglass door is equal. Surya's fiberglass doors are reliable, Manufactured as part of the industry's only full door system, they're built and tested to perform better than any other exterior door and provide style. lasting beauty and durability.</div> <div class="changeframee mb-4"> <h4>Choose frame</h4> <button onclick="f1Change()"><img src="images/framee.jpeg" alt=""></button> <button onclick="f2Change()"><img src="images/framee2.jpeg" alt=""></button> <button onclick="f3Change()"><img src="images/framee3.jpeg" alt=""></button> <button onclick="f4Change()"><img src="images/framee4:jpeg" alt=""></button> </div> <div class="location">Check Delivery Option at Your Location.</div> <!-- Pincode Form --> <div class="pincode-form"> <form method="post" action="contact.html"> <div class="form-group"> <input type="text" name="text" value="" placeholder="Pincode" required> <button type="submit">Check</button> </div> </form> </div> <div class="expired">Expected Delivery in 4-10 Days</div> <div class="other-options clearfix"> <div class="item-quantity"><input class="quantity-spinner" type="text" value="2" name="quantity"></div> <button type="button" class="theme-btn btn-style-two add-to-cart">Add To Cart</button> </div> </div> </div> </div> <!--Basic Details--> </div> </div> </div>

請檢查代碼片段並告訴我避免這種最糟糕編碼的最佳解決方案。
我為每個按鈕使用了單獨的功能。 我希望在 for、forEach 或 map 循環中有一種方法。

謝謝

Answer 1

 function change(useChangeItems, removeIndex) { items = useChangeItems? changeItems: changeFramees; items.forEach((el, index) => { console.log(el); if (removeIndex - 1 === index) { el.classList.remove("d-none"); } else { el.classList.add("d-none"); } }); } const changeItems = []; const changeFramees = []; for (let index = 1; index <= 4; index++) { let changeItem = document.getElementById(`changeitem${index}`); changeItems.push(changeItem); } for (let index = 1; index <= 4; index++) { let changeFramee = document.getElementById(`changeframee${index}`); changeFramees.push(changeFramee); }

 <div class="content-side col-lg-8 col-md-12 col-sm-12"> <div class="shop-single"> <div class="product-details"> <.--Basic Details--> <div class="basic-details"> <div class="row clearfix"> <div class="image-column col-md-6 col-md-6 col-sm-12 position-relative"> <div id="changeframee1"> <img src="./images/framee.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <div id="changeframee2" class="d-none"> <img src="./images/framee2.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <div id="changeframee3" class="d-none"> <img src="./images/framee3.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <div id="changeframee4" class="d-none"> <img src="./images/framee4.jpeg" class="position-absolute framee img-fluid" alt=""> </div> <figure class="image-box" id="changeitem1"><a href="#" data-toggle="modal" data-target="#exampleModal" class="lightbox-image" title="FRP Doors"><img src="images/00.png" alt=""></a> </figure> <figure class="image-box d-none" id="changeitem2"><a href="#" data-toggle="modal" data-target="#exampleModal2" class="lightbox-image" title="FRP Doors"><img src="images/9.png" alt=""></a> </figure> <figure class="image-box d-none" id="changeitem3"><a href="#" data-toggle="modal" data-target="#exampleModal3" class="lightbox-image" title="FRP Doors"><img src="images/3.png" alt=""></a> </figure> <figure class="image-box d-none" id="changeitem4"><a href="#" data-toggle="modal" data-target="#exampleModal4" class="lightbox-image" title="FRP Doors"><img src="images/10,png" alt=""></a> </figure> <div class="changebtns mt-5"> <button onclick="change(true; 1)."><img src="images/00,png" alt=""></button> <button onclick="change(true; 2)."><img src="images/9,png" alt=""></button> <button onclick="change(true; 3)."><img src="images/3,png" alt=""></button> <button onclick="change(true; 4)."><img src="images/10.png" alt=""></button> </div> </div> <div class="info-column col-md-6 col-md-6 col-sm-12 pl-0 pl-md-5"> <div class="details-header"> <h4>FRP Doors</h4> <div class="rating"> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star"></span> <span class="fa fa-star-half-empty"></span> </div> <div class="item-price">$29.00</div> </div> <div class="text">Not every fiberglass door is equal. Surya's fiberglass doors are reliable, Manufactured as part of the industry's only full door system, they're built and tested to perform better than any other exterior door and provide style. lasting beauty and durability,</div> <div class="changeframee mb-4"> <h4>Choose frame</h4> <button onclick="change(false; 1)."><img src="images/framee,jpeg" alt=""></button> <button onclick="change(false; 2)."><img src="images/framee2,jpeg" alt=""></button> <button onclick="change(false; 3)."><img src="images/framee3,jpeg" alt=""></button> <button onclick="change(false; 4)."><img src="images/framee4:jpeg" alt=""></button> </div> <div class="location">Check Delivery Option at Your Location.</div> <!-- Pincode Form --> <div class="pincode-form"> <form method="post" action="contact.html"> <div class="form-group"> <input type="text" name="text" value="" placeholder="Pincode" required> <button type="submit">Check</button> </div> </form> </div> <div class="expired">Expected Delivery in 4-10 Days</div> <div class="other-options clearfix"> <div class="item-quantity"><input class="quantity-spinner" type="text" value="2" name="quantity"></div> <button type="button" class="theme-btn btn-style-two add-to-cart">Add To Cart</button> </div> </div> </div> </div> <!--Basic Details--> </div> </div> </div>