简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
想要通过单击模式中的图像来更改多个图像
P粉269530053
P粉269530053 2024-01-29 09:35:00
0
1
332

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

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>

P粉269530053
P粉269530053

全部回复(1)
P粉590929392
P粉5909293922024-01-30 00:26:54 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
                     

                     
                     
                     
                     
                  

                  

               

               
            

         

      

      sssccc
      sssccc
点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！