想要通过单击模式中的图像来更改多个图像

Question

我使用gsap.js作为弹出窗口/模式。我使用forEach，这样无论我添加这个网站有多少相同的部分，它都会正常工作。我唯一的目标是现在，以某种方式完美地完成这个工作。每当您单击弹出的“按钮”时，我就会出现，然后您会得到9个图像，并从中选择4个图像，然后单击“保存编辑”，当您按“保存编辑”然后是正文图像时，其中有4个图像身体，它会自动改变。并且您可以一次又一次地更改它。constitems=doc

P粉590929392 · Answer

这是我的方法。在开发这个解决方案时，GsapJS 库并不是一个障碍。您会看到我已经单独发布了图像，因为您的图像已自动取消发布。

除非您保存，否则您的更改将不会显示。用户在这里选择的芯片数量是 4。每当您尝试选择更多或保存编辑但未选择至少 4 个芯片时，它都会向您发出警报。因此，在选择新芯片之前，您必须取消选择灰色芯片。我在这里使用了术语“芯片”而不是“硬币”。

我使用的工具是 CSS 动画，让点击后的芯片看起来就像翻转一样。这些材料/来源对我的工作有帮助，

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

想要通过单击模式中的图像来更改多个图像

全部回复(1)我来回复

Edit Chip Rack