搜索
搜索

單擊時，將一個項目從一個數組推送到另一個，並根據數組中的項目更改文本

Alex 发表于 Dev
17
亞歷克斯

我正在嘗試設置它，以便如果我單擊具有“addtocart”類的按鈕，它將檢查 HTML 文檔中按鈕的 id 並遍歷產品數組對象，直到找到具有相同 Id 的對象元素上的按鈕，然後將其推送到購物車數組。然後我需要更改“cartamnt”跨度的內部文本，以便根據添加到購物車的商品數量，文本“0 購物車”變為“1 購物車”等。

//Arrays
var products = [{
    Price: 20,
    Name: "Football Helmet",
    Description: "Titans football helmet",
    Id: "Titan_a"
  },
  {
    Price: 15,
    Name: "Light Blue Shirt",
    Description: "Titans light blue shirt",
    Id: "Titan_b"
  },
  {
    Price: 15,
    Name: "White Shirt",
    Description: "Titans white shirt",
    Id: "Titan_c"
  },
  {
    Price: 15,
    Name: "Blue Shirt",
    Description: "Titans blue shirt",
    Id: "Titan_d"
  },
  {
    Price: 25,
    Name: "Hockey Stick",
    Description: "Titans hockey stick",
    Id: "Titan_d"
  }
];

var cart = [];

//All the button variables
var addtocart = document.getElementsByClassName("add");
var camount = document.getElementById("cartamnt");
cartamnt.innerText = "0 cart"

addtocart.onclick = function(products, cart) {
  for (var i = 0; i < products.length; i++) {
    if (addtocart.Id == products.Id) {
      cart.push(products.Id[i])
      cartamnt.innerText = i++ + "cart"
    }
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <h1 id="main_title">Titan Sports and Apparel LLC</h1>
  <div class="main">
    <div class="row">
      <span href="checkout.html" id="cartamnt">0 cart</span>
      <br />
    </div>
    <div class="row">
      <div class="column">
        <h1>Football helmet</h1>
        <img id="img" src="img/Helmet_A.jpg">
        <p>Price: $20</p>
        <p>Official Titan Sportswear Helmet</p>
        <button class="add" id="Titan_a">Add to cart</button>
        <button id="Remove_a">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Light Blue Shirt</h1>
        <img id="img" src="img/Shirt_A.jpg">
        <p>Price: $15</p>
        <p>Light blue cotton material Titans shirt</p>
        <button class="add" id="Titan_b">Add to cart</button>
        <button id="Remove_b">Remove from cart</button>
      </div>
      <div class="column">
        <h1>White Shirt</h1>
        <img id="img" src="img/Shirt_B.jpg">
        <p>Price: $15</p>
        <p>White cotton material Titans shirt</p>
        <button class="add" id="Titan_c">Add to cart</button>
        <button id="Remove_c">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Blue Shirt</h1>
        <img id="img" src="img/Shirt_C.jpg">
        <p>Price: $15</p>
        <p>Blue cotton material Titans shirt</p>
        <button class="add" id="Titan_d">Add to cart</button>
        <button id="Remove_d">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Hockey Stick</h1>
        <img id="img" src="img/Stick_A.png">
        <p>Price: $25</p>
        <p>Black Titans hockey stick</p>
        <button class="add" id="Titan_e">Add to cart</button>
        <button id="Remove_e">Remove from cart</button>
      </div>
    </div>
  </div>
  <a href="index.html">Homepage</a>
  <footer>© Titan Sports and Apparel LLC | Email: [email protected]</footer>
  <script src="js/shoppingCart.js"></script>
</body>

</html>

邁克爾·哈達德

你的代碼有點亂。我對它進行了一些清理以幫助您入門，但我真的建議您將其發佈到Code Review以了解如何改進它。

首先要注意的是，您正在使用id“添加”按鈕來存儲產品的 id。這是一個問題，原因有兩個：

  1. id屬性的目的是給元素一個唯一的標識符，而不是存儲數據。
  2. 您還有一個“移除”按鈕，用於將產品從購物車中移除。使用您的方法，它將id與“添加”按鈕相同，這是不正確的，因為它id應該是唯一的。另一種方法是給它一個不同的 id，並以某種方式在 JS 中從中提取產品 id，這真的很複雜。

這就是為什麼我們將使用數據屬性而不是id存儲產品 ID。例如：

<button class="add" data-product="Titan_a">Add to cart</button>
<button class="remove" data-product="Titan_a">Remove from cart</button>

現在，您的 JS 的問題在於您的addtocart變量實際上是所有按鈕的數組，而不是單個按鈕，因此您不能僅將onclick事件附加到它。您需要遍歷所有按鈕並將onclick事件單獨附加到它們。

所以我們會得到這樣的東西：

const addButtons = document.getElementsByClassName("add");
const removeButtons = document.getElementsByClassName("remove");

for (const addButton of addButtons) {
    addButton.addEventListener("click", () => {
         ...
    });
}
for (const removeButton of removeButtons) {
    removeButton.addEventListener("click", () => {
         ...
    });
}

現在很容易實現添加和刪除。您不需要手動循環拋出您的數組，您可以簡單地使用該find函數和其他一些有用的“內置”數組函數。

這是一個完整的工作示例：

let products = [{
    Price: 20,
    Name: "Football Helmet",
    Description: "Titans football helmet",
    Id: "Titan_a"
  },
  {
    Price: 15,
    Name: "Light Blue Shirt",
    Description: "Titans light blue shirt",
    Id: "Titan_b"
  },
  {
    Price: 15,
    Name: "White Shirt",
    Description: "Titans white shirt",
    Id: "Titan_c"
  },
  {
    Price: 15,
    Name: "Blue Shirt",
    Description: "Titans blue shirt",
    Id: "Titan_d"
  },
  {
    Price: 25,
    Name: "Hockey Stick",
    Description: "Titans hockey stick",
    Id: "Titan_e"
  }
];

let cart = [];

const addButtons = document.getElementsByClassName("add");
const removeButtons = document.getElementsByClassName("remove");
const amountLabel = document.getElementById("cartamnt");

for (const addButton of addButtons) {
  addButton.addEventListener("click", () => {
    let product = products.find(p => p.Id == addButton.dataset.product);
    cart.push(product);
    amountLabel.innerText = cart.length + "items";
  });
}
for (const removeButton of removeButtons) {
  removeButton.addEventListener("click", () => {
    const index = cart.findIndex(p => p.Id === removeButton.dataset.product); // index of product to remove
    cart.splice(index, 1); // removing it
    amountLabel.innerText = cart.length + "items";
  });
}
<!DOCTYPE html>
<html>

<body>
  <h1 id="main_title">Titan Sports and Apparel LLC</h1>
  <div class="main">
    <div class="row">
      <span href="checkout.html" id="cartamnt">0 cart</span>
      <br />
    </div>
    <div class="row">
      <div class="column">
        <h1>Football helmet</h1>
        <img id="img" src="img/Helmet_A.jpg">
        <p>Price: $20</p>
        <p>Official Titan Sportswear Helmet</p>
        <button class="add" data-product="Titan_a">Add to cart</button>
        <button class="remove" data-product="Titan_a">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Light Blue Shirt</h1>
        <img id="img" src="img/Shirt_A.jpg">
        <p>Price: $15</p>
        <p>Light blue cotton material Titans shirt</p>
        <button class="add" data-product="Titan_b">Add to cart</button>
        <button class="remove" data-product="Titan_b">Remove from cart</button>
      </div>
      <div class="column">
        <h1>White Shirt</h1>
        <img id="img" src="img/Shirt_B.jpg">
        <p>Price: $15</p>
        <p>White cotton material Titans shirt</p>
        <button class="add" data-product="Titan_c">Add to cart</button>
        <button class="remove" data-product="Titan_c">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Blue Shirt</h1>
        <img id="img" src="img/Shirt_C.jpg">
        <p>Price: $15</p>
        <p>Blue cotton material Titans shirt</p>
        <button class="add" data-product="Titan_d">Add to cart</button>
        <button class="remove" data-product="Titan_d">Remove from cart</button>
      </div>
      <div class="column">
        <h1>Hockey Stick</h1>
        <img id="img" src="img/Stick_A.png">
        <p>Price: $25</p>
        <p>Black Titans hockey stick</p>
        <button class="add" data-product="Titan_e">Add to cart</button>
        <button class="remove" data-product="Titan_e">Remove from cart</button>
      </div>
    </div>
  </div>
  <a href="index.html">Homepage</a>
  <footer>© Titan Sports and Apparel LLC | Email: [email protected]</footer>
</body>

</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

嘗試將一個數組中的項目與另一個數組中的項目匹配，但第一個項目被省略

在地圖數組中找到一個項目並將其刪除

Array.forEach 單擊時更新數組中的每個項目

JS使用map將所有項目添加到一個數組中

Javascript：如何顯示數組中的一定數量的項目並在單擊按鈕時顯示其他項目？

Pyspark：根據另一個數組列更改數組列中的值

如何根據 JS 中的另一個數組導航一個數組

將包含某個字符串的所有項目放在另一列的數據框中

將單元格添加到另一個 TableView。（從 tableview 中選擇一個項目，在另一個 tableview 中顯示它）

嘗試將 localhost laravel 項目從另一台服務器連接到另一個數據庫

我如何讓這個函數為第一個項目和字符串“在購物車中找不到項目”之後的每個項目返回一個新數組？

在C中將奇數索引元素從一個數組複製到另一個數組

需要幫助將 mysql 數據庫中的兩個表連接到一個攝影項目

如何從一組數據項創建一個對象？

如何編寫一個將項目數組作為輸入並以最低價格返回項目的方法（也考慮折扣）？

Vue js 將一個函數從子智利傳遞給單擊事件的另一個子組件

如何在 PHP 中將多個數組項插入到一個數組中

如何使用反應中的函數將json數據從一個組件傳遞到另一個組件

將數組拆分為單個元素（賭博遊戲項目）

在vue中從另一個數組中過濾一個數組

在 PowerShell 中從多個數組中獲取最多的項目數

將數組中的所有項目設置為一個數字，無需 for 循環 C++

將數據從一個 python 文件發送到另一個

用除最後一個以外的所有項目重新創建數組

有沒有一種 LINQ 方法可以根據數量將 2 個行項目變成 N 個？

如何根據對象的值將對像數組拆分為另一個數組？

如何根據另一個項目調整撰寫列中的項目大小

將特定數字從一個數組複製到另一個數組

Numpy 數組：遍歷列並根據下一個值更改值

TOP 榜单

  1. 1

    Android Studio Kotlin：提取为常量

  2. 2

    IE 11中的FormData未定义

  3. 3

    计算数据帧R中的字符串频率

  4. 4

    如何在R中转置数据

  5. 5

    如何使用Redux-Toolkit重置Redux Store

  6. 6

    Excel 2016图表将增长与4个参数进行比较

  7. 7

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  8. 8

    未捕获的SyntaxError：带有Ajax帖子的意外令牌u

  9. 9

    OpenCv：改变 putText() 的位置

  10. 10

    ActiveModelSerializer仅显示关联的ID

  11. 11

    算术中的c ++常量类型转换

  12. 12

    如何开始为Ubuntu开发

  13. 13

    将加号/减号添加到jQuery菜单

  14. 14

    去噪自动编码器和常规自动编码器有什么区别？

  15. 15

    获取并汇总所有关联的数据

  16. 16

    OpenGL纹理格式的颜色错误

  17. 17

    在 React Native Expo 中使用 react-redux 更改另一个键的值

  18. 18

    http：// localhost：3000 /＃！/为什么我在localhost链接中得到“＃！/”。

  19. 19

    TreeMap中的自定义排序

  20. 20

    Redux动作正常，但减速器无效

  21. 21

    如何对treeView的子节点进行排序

热门标签

归档