Ingin menukar berbilang imej dengan mengklik pada imej dalam modal

Question

Saya menggunakan gsap.js untuk pop timbul/modal. Saya menggunakan forEach supaya tidak kira berapa banyak bahagian yang sama yang saya tambahkan pada tapak web ini, ia akan berfungsi dengan baik. Satu-satunya matlamat saya ialah untuk membuat ini berfungsi dengan sempurna sekarang, entah bagaimana. Setiap kali anda mengklik pada "butang" yang muncul, maka anda mendapat 9 imej dan pilih 4 daripadanya dan klik "Simpan Suntingan" dan apabila anda menekan "Simpan Suntingan" maka teks badan Apabila imej mempunyai 4 badan imej di dalamnya, ia akan berubah secara automatik. Dan anda boleh mengubahnya lagi dan lagi. konstitem=doc

P粉590929392 · Answer

Ini kaedah saya. Pustaka GsapJS tidak menjadi halangan semasa membangunkan penyelesaian ini. Anda akan melihat bahawa saya telah menerbitkan imej secara berasingan kerana imej anda telah dinyahterbitkan secara automatik.

Perubahan anda tidak akan dipaparkan melainkan anda menyimpan. Bilangan cip yang dipilih pengguna di sini ialah 4. Ia akan memaklumkan anda apabila anda cuba memilih lebih banyak atau menyimpan suntingan tanpa sekurang-kurangnya 4 cip dipilih. Oleh itu, anda mesti nyahpilih cip kelabu sebelum memilih cip baharu. Saya telah menggunakan istilah "cip" di sini dan bukannya "syiling".

Alat yang saya gunakan ialah animasi CSS untuk menjadikan cip kelihatan seperti terbalik apabila diklik. Bahan/sumber ini membantu dalam kerja saya,

w3school
bobbyhadz

//All items declared in a single object
const allChips = [{
      name: 'chip-val-1',
      img: 'https://i.im.ge/2022/11/28/S0jFH4.image.png',
      bk: 'https://i.im.ge/2022/11/28/S0wuFC.S0jFH4-image.png'
   },
   {
      name: 'chip-val-50',
      img: 'https://i.im.ge/2022/11/28/S0j11C.image.png',
      bk: 'https://i.im.ge/2022/11/28/S0wlk4.S0j11C-image.png'
   },
   {
      name: 'chip-val-1000',
      img: 'https://i.im.ge/2022/11/28/S0j2wq.image.png',
      bk: 'https://i.im.ge/2022/11/28/S0wORp.S0j2wq-image.png'
   },
   {
      name: 'chip-val-5',
      img: 'https://i.im.ge/2022/11/28/S0jSZp.image.png',
      bk: 'https://i.im.ge/2022/11/28/S0wd3f.S0jSZp-image.png'
   },
   {
      name: 'chip-val-100',
      img: 'https://i.im.ge/2022/11/28/S0jqXP.image.png',
      bk: 'https://i.im.ge/2022/11/28/S0wSU1.S0jqXP-image.png'
   },
   {
      name: 'chip-val-3000',
      img: 'https://i.im.ge/2022/11/28/S0j7Gm.chip-3000.png',
      bk: 'https://i.im.ge/2022/11/28/S0wFjq.S0j7Gm-chip-3000.png'
   },
   {
      name: 'chip-val-10',
      img: 'https://i.im.ge/2022/11/28/S0jI7r.chip-10.png',
      bk: 'https://i.im.ge/2022/11/28/S0wXtD.S0jI7r-chip-10.png'
   },
   {
      name: 'chip-val-500',
      img: 'https://i.im.ge/2022/11/28/S0jLAW.chip-500.png',
      bk: 'https://i.im.ge/2022/11/28/S0w2TP.S0jLAW-chip-500.png'
   },
   {
      name: 'chip-val-5000',
      img: 'https://i.im.ge/2022/11/28/S0jUp0.chip-5000.png',
      bk: 'https://i.im.ge/2022/11/28/S0wq4m.S0jUp0-chip-5000.png'
   }
]

//Dedicated array for selected chips
let selectedChips = ['chip-val-100', "chip-val-500", "chip-val-1000", "chip-val-3000"];

const items = document.querySelectorAll(".mdlsc");
const modal = document.querySelector(".modal");
items.forEach((item, index) => {
   item.querySelector(".opnBtn").addEventListener("click", () => {
      item.querySelector(".modal").style.display = "grid";
      gsap.to(item.querySelector(".modalwrap"), {
         scale: 1,
         ease: "elastic.out(1, 0.3)",
      });

      try {
         popupBoard();
      } catch (e) {
         console.error(e);
      }

   });
   item.querySelector(".ovlybg").addEventListener("click", () => {

      refreshSelectedChips();

      gsap.to(item.querySelector(".modalwrap"), {
         scale: 0,
         ease: "elastic.out(1, 0.3)",
      });
      item.querySelector(".modal").style.display = "none";

   });
   item.querySelector(".clsebtn").addEventListener("click", () => {
      refreshSelectedChips('save');
      item.querySelector(".modal").style.display = "none";
   })
});

//Function for displaying selected chips
const refreshSelectedChips = (b) => {

   document.getElementById("selected-chips").innerHTML = '';
   const dyChips = document.querySelectorAll('.fliped');

   if (b === 'save') {
      if (dyChips.length !== 4) {
         alert("Please select 4 chips.")
         item.querySelector(".modal").style.display = "grid";
      } else {
         selectedChips = [];
         for (let i = 0; i < dyChips.length; i++) {
            selectedChips.push(dyChips[i].id);
         }
      }
   }


   document.getElementById("popup-board").innerHTML = '';
   populateBoard();

}

//Function for edit panel
const popupBoard = () => {

   for (let i = 0; i < allChips.length; i++) {

      let chipID = allChips[i].name;
      let chipFrontID = 'chip-front-' + Math.round(Math.random() * 1000) + '-' + i;
      let chipBackID = 'chip-front-' + Math.round(Math.random() * 1000) + '-' + i;

      const flipedStatus = (x) => {
         for (let y = 0; y < selectedChips.length; y++) {
            if (x === selectedChips[y]) {
               return `fliped`
            }
         }
      }

      //"popup-board" gets updated on save 
      document.getElementById("popup-board").innerHTML +=

         `
            
            
            
            
            
            

            
            
            
            `

      const dyChips = document.querySelectorAll('.chip-inner');

      for (let dy of dyChips) {
         dy.addEventListener('click', function flipClick() {

            if (dy.classList.contains('fliped')) {
               dy.classList.remove('fliped');
            } else {
               if (document.querySelectorAll('.fliped').length >= 4) {
                  alert("Only 4 chips can be selected.");
               } else {
                  dy.classList.add('fliped');
               }

            }
         })
      }
   }
}

//Displaying the selected items at startup
const populateBoard = () => {

   selectedChips.forEach(name => {
      const img = document.createElement("img");
      img.alt = name;
      for (let i = 0; i < allChips.length; i++) {
         if (name === allChips[i].name) {
            img.src = allChips[i].img;
         }
      }
      window["selected-chips"].appendChild(img);
   })
}


//Initial trigger for displaying the selected items
try {
   populateBoard();
} catch (e) {
   console.error(e);
}

body {
    width: 100%;
    overflow-x: hidden;
    color: #fff;
    background: url(https://i.im.ge/2022/11/28/S0jypz.download.png) no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
}

body img {
    width: 100%;
}

body button {
    background: transparent;
    border: none;
    cursor: pointer;
}

.main {
    width: 500px;
    margin: auto;
}

.modal {
    position: fixed;
    z-index: 9;
    left: 0%;
    top: 0%;
    width: 100%;
    height: 100vh;
    place-content: center;
    place-items: center;
    display: none;
}

.modal .ovlybg {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0px;
    left: 0%;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.modal .modalwrap {
    transform: scale(0);
    width: 400px;
    margin: auto;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    border: 5px solid #fff;
    border-radius: 77px;
    position: relative;
    z-index: 3;
    background: linear-gradient(to right, #400df0, #6203b3, #940599);
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    padding: 45px 0px;
}

.edtchp {
    text-align: center;
    padding: 25px 0px 2px;
}

.edtchp span {
    font-size: 1em;
    margin: 0;
}

.edtchp h1 {
    font-size: 2.2em;
    color: #fff;
    margin: 0;
    transform: translate(0px, 0px);
}

.clsebtn img {
    width: 120px;
}

.mdlsc {
    margin-left: 10px;
}

.grypnk {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 18px 5px;
    width: 80%;
    margin: auto;
}

.grypnk img {
    width: 100% !important;
}

.coinsc {
    display: flex;
    align-items: center;
    width: 85%;
    margin: auto;
    gap: 8px;
    justify-content: center;
    margin: 10px auto;
}

.coinsc .imdwidth {
    display: flex;
    align-items: center;
}

.coinsc .imdwidth img {
    width: 45px;
}

.coin {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    align-items: center;
}


/*I have used the term chip instead of coin here*/
.chip:nth-child(n+4) {
    margin-top: 100px;
}

.chip:nth-child(n+7) {
    margin-bottom: 100px;
}

.chip {
    background-color: transparent;
    perspective: 1000px;
    cursor: pointer;
}

/*Animation when a chip is clicked/selected*/
.chip-inner {
    position: relative;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.chip .chip-inner.fliped {
    transform: rotateY(180deg);
}

.chip-front,
.chip-back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    /*Backface is hidden since it reveals as chip flips*/
    backface-visibility: hidden;
}

.chip-back {
    transform: rotateY(180deg);
}


   
      
      
   
   
      
         
            
            
            
               
                  
                     
                        Edit Chip Rack
                        SELECT 4 CHIPS TO DISPLAY
                     
                     
                     
                     
                     
                     
                  
                  
               
               
            
         
      
      sssccc
      sssccc

Ingin menukar berbilang imej dengan mengklik pada imej dalam modal

membalas semua(1)saya akan balas

Edit Chip Rack