堆栈内存溢出
  繁体   English   中英

将html添加到列表中的最后一个元素

[英]Add html to last element in list

 原文  2022-06-27 11:36:43  0   1    javascript

问题描述

我是 js 的初学者，我正在尝试添加结帐 HTML，其中包含所有添加的电影的总价格。 问题是我只想将它添加到最后一部电影，然后我将制定逻辑来计算所有电影的总和。 这是我第一次发帖，我希望这足以理解这一点。

<

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial- 
        scale=1.0" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?        
 family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Filmovizija</title>
  </head>
  <body>
    <h1>Filmovizija</h1>
    <div class="prozor"></div>
    <h2>Shooping bag</h2>
    <div class="shooping-cart"></div>

    <script src="script.js"></script>
  </body>
</html>

    enter code const options = {
  method: "GET",
  headers: {
    "X-RapidAPI-Key": "cd782e9b03mshbd50bac036f1802p16179djsn48c38f33f263",
    "X-RapidAPI-Host": "online-movie-database.p.rapidapi.com",
  },
};

const main = document.querySelector(`.prozor`);
const shoopingCart = document.querySelector(`.shooping-cart`);

fetch(
  "https://online-movie-database.p.rapidapi.com/auto-complete?q=hacker",
  options
)
  .then((response) => response.json())
  .then((data) => {
    const list = data.d;
    list.map((item) => {
      const name = item.l;
      const rank = item.rank;
      const price = Math.floor(rank / 100);
      const poster = item.i.imageUrl;
      const movie = ` <div class="movie">
               <img src=${poster} alt="${name}" />
                           <div class="movie-info">
                              <h3>${name}</h3>
                              <span>#${rank}</span>
                            </div>
                            <div class="kupi">
                              <button class="addToBag">Kupi film</button>
                              <span>${price} HRK</span>
                            </div>
                    </div>`;
      main.innerHTML += movie;

      //---------------------------------- dodaj u kosaricu =--------------------------//

      const button = document.querySelectorAll(`.addToBag`);
      button.forEach((button) => {
        button.addEventListener(`click`, function (e) {
          const clicked = e.target;
          const kupi = clicked.closest(`.kupi`);
          const cijena2 = kupi.querySelector(`span`).innerText;
          const cijena = cijena2.split(` `)[0];
          const parent = kupi.closest(`.movie`);
          const imeFilma = parent.querySelector(`.movie-info h3`).innerText;
          const imgSrc = parent.querySelector(`img`).src;

          const singleItem = `
          <div class="single-item">
             <span class="material-symbols-outlined deleteItem"> close </span>
               <img src=${imgSrc} alt="aaa" class="smallPic" />
                   <div class="opis">
                       <h2>${imeFilma}</h2>
                    </div>
                   <div class="kolicina">
                      <button class="plus">+</button>
                     <input type="text" value="1" max="3" min="1" class="input"/>
                     <button class="minus">-</button>
                   </div>
               <div class="single-total" data-value="${cijena}">${cijena} KN</div>
            </div>
          `;

          shoopingCart.innerHTML += singleItem;

          const basketTotal = `
          <div class="totalKosara">
        <div class="potvrdi">
          <p class="sub">Subtotal</p>
          <p class="price">675 KN</p>
        </div>
        <div class="text">
          <p>Shipping, taxes and discounts calculated at checkout.</p>
        </div>
        <div class="blue"><button>Checkout</button></div>
      </div>
          `;

          shoopingCart.innerHTML += basketTotal;

          //OBRISI ITEM
          const deleteItem = document.querySelectorAll(`.deleteItem`);
          deleteItem.forEach((btn) => {
            btn.addEventListener(`click`, function (e) {
              const mainEl = e.target.closest(`.single-item`);
              mainEl.parentNode.removeChild(mainEl);
              button.disabled = false;
            });
          });

          //add more movies btn
          const plusBtn = document.querySelectorAll(`.plus`);
          const minusBtn = document.querySelectorAll(`.minus`);

          plusBtn.forEach((btn) => {
            btn.addEventListener(`click`, function (e) {
              let plus = e.target;
              let parent = plus.closest(`.kolicina`);
              let input = parent.querySelector(`.input`);
              let singleEl = parent.closest(`.single-item`);
              let singleTotal = singleEl.querySelector(`.single-total`);

              input.value++;
              if (input.value > 3) input.value = 3;
              singleTotal.innerText = `${
                singleTotal.dataset.value * input.value
              } KN`;
            });
          });

          minusBtn.forEach((btn) => {
            btn.addEventListener(`click`, function (e) {
              let plus = e.target;
              let parent = plus.closest(`.kolicina`);
              let input = parent.querySelector(`.input`);
              let singleEl = parent.closest(`.single-item`);
              let singleTotal = singleEl.querySelector(`.single-total`);

              input.value--;
              console.log(input.innerText);
              if (input.value < 1) input.value = 1;
              singleTotal.innerText = `${
                singleTotal.dataset.value * input.value
              } KN`;
            });
          });
        });
      });
    });
  })
  .catch((err) => console.error(err));here
  
      * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #22254b;
  font-family: "Poppins", sans-serif;
}

h1 {
  text-align: center;
  color: #eee;
  font-family: inherit;
  margin-top: 30px;
  margin-bottom: 30px;
}

.prozor {
  display: flex;
  flex-wrap: wrap;
}

.movie {
  width: 300px;
  border-radius: 4px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
  background-color: #373b69;
  margin: 25px;
}

.movie-info {
  color: #eee;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  letter-spacing: 1px;
  align-items: center;
}

.movie img {
  width: 100%;
  border-bottom: 1px solid white;
  height: 450px;
}

.movie-info h3 {
  font-weight: 300;
  margin: 0;
}

.movie-info span {
  font-weight: 400;
  border-radius: 3px;
  background-color: #22254b;
  padding: 3px 7px;
}

.movie .kupi {
  color: #eee;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  padding-bottom: 15px;
  letter-spacing: 1px;
  align-items: center;
}

.movie .kupi button {
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 500;
}

.movie .kupi span {
  font-size: 18px;
  font-weight: 500;
}

/* ----------------------------------- SHOOPING CART ------------------------------------------------ */

.shooping-cart {
  border-top: 2px solid rgb(214, 214, 214);
  width: 1000px;
  height: 500px;
  margin-left: 25px;
}

h2 {
  color: whitesmoke;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 20px;
  margin-left: 25px;
}

.shooping-cart .single-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 2px dotted grey;
}

.shooping-cart .single-item span {
  background-color: rgb(255, 255, 255);
  margin-left: 20px;
  border-radius: 50%;
  color: black;
}

.smallPic {
  height: 70px;
  width: 70px;
  border: 1px solid grey;
}

.shooping-cart .single-item .opis {
  align-items: center;
  display: flex;
  flex-direction: column;
  color: white;
  font-family: inherit;
}

.shooping-cart .single-item .opis h2 {
  font-weight: 300;
  margin-bottom: 5px;
}

.shooping-cart .single-item .opis h3 {
  font-size: 14px;
  font-weight: bold;
  color: antiquewhite;
  text-transform: uppercase;
}

.shooping-cart .single-item .kolicina input {
  width: 30px;
  text-align: center;
}

.shooping-cart .single-item .kolicina button {
  padding: 2px 6px;
  background-color: whitesmoke;
  border: 0;
}

.single-total {
  color: white;
  margin-right: 20px;
}

/* ----------------------------------- SHOOPING CART TOTAL ALL ------------------------------------------------ */

.totalKosara {
  float: right;
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 160px;
  margin-top: 15px;
}

.potvrdi {
  display: flex;
  width: 100%;
  margin: 20px 0;
  justify-content: space-between;
  text-align: center;
}

.potvrdi .sub,
.price {
  color: #eee;
  font-weight: bold;
  padding: 5px;
}

.text {
  color: white;
  font-size: 14px;
  text-align: center;
}

.blue {
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.blue button {
  width: 100%;
  border-radius: 2px;
  border: 0;
  padding: 10px;
  background-color: #0b1050;
  color: #eee;
  font-family: inherit;
  border: 1px solid grey;
}

1 个解决方案

解决方案1
 0  2022-06-27 12:07:05

好的，不是最干净的方法，但它有效。

我做了什么：

  • 添加let subtot = document.querySelector('.price'); 在minusBtn.foreach和plusBtn.forEach 中

  • 向这些元素添加值的方式与对singleTotal变量的添加方式相同：

     subtot.innerText = `${ singleTotal.dataset.value * input.value } KN`;

  • 更改了<p class="price">${cijena}</p>的输入值 - 是<p class="price">675 KN</p>"

这是一个代码片段，您可以看到： 

 const options = { method: "GET", headers: { "X-RapidAPI-Key": "cd782e9b03mshbd50bac036f1802p16179djsn48c38f33f263", "X-RapidAPI-Host": "online-movie-database.p.rapidapi.com", }, }; const main = document.querySelector(`.prozor`); const shoopingCart = document.querySelector(`.shooping-cart`); fetch( "https://online-movie-database.p.rapidapi.com/auto-complete?q=hacker", options ) .then((response) => response.json()) .then((data) => { const list = data.d; list.map((item) => { const name = item.l; const rank = item.rank; const price = Math.floor(rank / 100); const poster = item.i.imageUrl; const movie = ` <div class="movie"> <img src=${poster} alt="${name}" /> <div class="movie-info"> <h3>${name}</h3> <span>#${rank}</span> </div> <div class="kupi"> <button class="addToBag">Kupi film</button> <span>${price} HRK</span> </div> </div>`; main.innerHTML += movie; //---------------------------------- dodaj u kosaricu =--------------------------// const button = document.querySelectorAll(`.addToBag`); button.forEach((button) => { button.addEventListener(`click`, function (e) { const clicked = e.target; const kupi = clicked.closest(`.kupi`); const cijena2 = kupi.querySelector(`span`).innerText; const cijena = cijena2.split(` `)[0]; const parent = kupi.closest(`.movie`); const imeFilma = parent.querySelector(`.movie-info h3`).innerText; const imgSrc = parent.querySelector(`img`).src; const singleItem = ` <div class="single-item"> <span class="material-symbols-outlined deleteItem"> close </span> <img src=${imgSrc} alt="aaa" class="smallPic" /> <div class="opis"> <h2>${imeFilma}</h2> </div> <div class="kolicina"> <button class="plus">+</button> <input type="text" value="1" max="3" min="1" class="input"/> <button class="minus">-</button> </div> <div class="single-total" data-value="${cijena}">${cijena} KN</div> </div> `; shoopingCart.innerHTML += singleItem; const basketTotal = ` <div class="totalKosara"> <div class="potvrdi"> <p class="sub">Subtotal</p> <p class="price">${cijena}</p> </div> <div class="text"> <p>Shipping, taxes and discounts calculated at checkout.</p> </div> <div class="blue"><button>Checkout</button></div> </div> `; shoopingCart.innerHTML += basketTotal; //OBRISI ITEM const deleteItem = document.querySelectorAll(`.deleteItem`); deleteItem.forEach((btn) => { btn.addEventListener(`click`, function (e) { const mainEl = e.target.closest(`.single-item`); mainEl.parentNode.removeChild(mainEl); button.disabled = false; }); }); //add more movies btn const plusBtn = document.querySelectorAll(`.plus`); const minusBtn = document.querySelectorAll(`.minus`); plusBtn.forEach((btn) => { btn.addEventListener(`click`, function (e) { let plus = e.target; let parent = plus.closest(`.kolicina`); let input = parent.querySelector(`.input`); let singleEl = parent.closest(`.single-item`); let singleTotal = singleEl.querySelector(`.single-total`); let subtot = document.querySelector('.price'); input.value++; if (input.value > 3) input.value = 3; singleTotal.innerText = `${ singleTotal.dataset.value * input.value } KN`; subtot.innerText = `${ singleTotal.dataset.value * input.value } KN`; }); }); minusBtn.forEach((btn) => { btn.addEventListener(`click`, function (e) { let plus = e.target; let parent = plus.closest(`.kolicina`); let input = parent.querySelector(`.input`); let singleEl = parent.closest(`.single-item`); let singleTotal = singleEl.querySelector(`.single-total`); let subtot = document.querySelector('.price'); input.value--; console.log(input.innerText); if (input.value < 1) input.value = 1; singleTotal.innerText = `${ singleTotal.dataset.value * input.value } KN`; subtot.innerText = `${ singleTotal.dataset.value * input.value } KN`; }); }); }); }); }); }) .catch((err) => console.error(err));
 <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial- scale=1.0" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2? family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" /> <link rel="stylesheet" href="style.css" /> <title>Filmovizija</title> </head> <body> <h1>Filmovizija</h1> <div class="prozor"></div> <h2>Shooping bag</h2> <div class="shooping-cart"></div> <script src="script.js"></script> </body> </html>

注意：这是一个外部片段，因为它包含大图像，所以很难看到上面发生了什么。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为 html 列表中的最后一个可见元素添加不透明度 如何在列表项的最后一个子项之后添加html元素 在列表元素HTML中添加空格 如何在jQuery中将HTML元素添加到动态列表 如何向新创建的HTML元素添加列表ID？ 在 HTML 表 header 中添加类似 excel 的元素列表 单击时将 class 添加到 HTML 列表中的一个且仅一个元素 获取HTML结构中的最后一个元素 将元素放在排序列表的最后 将元素 jquery 添加到 html
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM