Möchten Sie mehrere Bilder ändern, indem Sie in einem Modal auf die Bilder klicken?

Question

Ich verwende gsap.js für das Popup/Modal. Ich verwende forEach, damit es einwandfrei funktioniert, egal wie viele identische Teile dieser Site ich hinzufüge. Mein einziges Ziel ist es, dass das jetzt irgendwie perfekt funktioniert. Immer wenn Sie auf die „Schaltfläche“ klicken, die angezeigt wird, erhalten Sie 9 Bilder, wählen 4 davon aus und klicken auf „Änderungen speichern“. Wenn Sie auf „Änderungen speichern“ klicken, wird der Textkörper angezeigt. Wenn das Bild 4 Bildkörper enthält, es ändert sich automatisch. Und Sie können es immer wieder ändern.

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)",
    });
  });
  item.querySelector(".ovlybg").addEventListener("click", () => {
    gsap.to(item.querySelector(".modalwrap"), {
      scale: 0,
      ease: "elastic.out(1, 0.3)",
    });
    item.querySelector(".modal").style.display = "none";
  });
});

body {
  width: 100%;
  overflow-x: hidden;
  color: #fff;
  background: url(https://polite-figolla-02d41d.netlify.app/img/wefdf.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;
}

    <div class="main">
      <div class="coinsc">
        <div class="coin">
          <img
            src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-100.png"
            alt=""
          />
          <img
            src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-500.png"
            alt=""
          />
          <img
            src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-1000.png"
            alt=""
          />
          <img
            src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-3000.png"
            alt=""
          />
        </div>

        <div class="mdlsc">
          <div class="modal">
            <div class="modalwrap antclr">
              <div class="edtchp">
                <h1>Edit Chip Rack</h1>
                <span>SELECT 4 CHIPS TO DISPLAY</span>
              </div>
              <div class="grypnk">
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-1.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-50.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-1000.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-5.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-100.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-3000.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-10.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-500.png"
                  alt=""
                />
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-5000.png"
                  alt=""
                />
              </div>
              <a href="#" class="clsebtn" >
                <img
                  src="https://polite-figolla-02d41d.netlify.app/img/saveedit.png"
                  alt=""
                />
              </a>
            </div>
            <div class="ovlybg"></div>
          </div>
          <button class="opnBtn">
            <div class="imdwidth">
              <img
                src="https://polite-figolla-02d41d.netlify.app/img/Chips/chip-editchip.png"
                alt=""
              />
            </div>
          </button>
        </div>
      </div>
    </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>

Answer 1

这是我的方法。在开发这个解决方案时，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  {

   for (let i = 0; i  {
         for (let y = 0; y 

            
            

            
            
            
            

            
            
            
            

` 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

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