Vous souhaitez modifier plusieurs images en cliquant sur les images dans un modal

Question

J'utilise gsap.js pour le popup/modal. J'utilise forEach pour que peu importe le nombre de pièces identiques que j'ajoute à ce site Web, cela fonctionnera correctement. Mon seul objectif est de faire en sorte que cela fonctionne parfaitement maintenant, d'une manière ou d'une autre. Chaque fois que vous cliquez sur le "bouton" qui apparaît, vous obtenez 9 images, sélectionnez-en 4 et cliquez sur "Enregistrer les modifications" et lorsque vous appuyez sur "Enregistrer les modifications", le corps du texte. Lorsque l'image contient 4 corps d'image, cela changera automatiquement. Et vous pouvez le changer encore et encore. constituants=doc

P粉590929392 · Answer

C'est ma méthode. La bibliothèque GsapJS n'a pas été un obstacle lors du développement de cette solution. Vous verrez que j'ai publié l'image séparément car votre image a été automatiquement dépubliée.

Vos modifications ne s'afficheront que si vous enregistrez. Le nombre de jetons que l'utilisateur sélectionne ici est de 4. Il vous alertera chaque fois que vous essayez d'en sélectionner davantage ou d'enregistrer des modifications sans qu'au moins 4 puces soient sélectionnées. Par conséquent, vous devez désélectionner la puce grise avant de sélectionner la nouvelle puce. J'ai utilisé ici le terme « puce » plutôt que « pièce de monnaie ».

L'outil que j'ai utilisé était l'animation CSS pour donner l'impression que la puce se retournait lorsqu'on cliquait dessus. Ces matériaux/sources sont utiles dans mon travail,

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

Vous souhaitez modifier plusieurs images en cliquant sur les images dans un modal

répondre à tous(1)je répondrai

Edit Chip Rack