时间戳

首页 > 解决方案 > 使用 javaScript 根据 id 显示数组的对象属性

javascript - 使用 javaScript 根据 id 显示数组的对象属性

问题描述

我是 javaScript 的新手，并使用 javaScript 开发客户端购物车。我已经在单独的 DIVS 和循环锚标记中显示了来自数组的产品详细信息。我要做的是，当单击锚标记（添加到购物车）时，只有该特定产品应显示在单独的 div 中。单击每个按钮时，如何将产品 id(id1) 传递给 href？任何人都可以给出任何想法吗？我真的很感谢你的努力。这是我的代码示例。

var cakeDetails = [
  {
    id1: "1",
    cakeimage: "images/cup3.png",
    cakename: "White chocolate cheese cake",
    price: "£25"
  }, 
  {
    id1: "2",
    cakeimage: "images/cup2.png",
    cakename: "Angel cup cake",
    price: "£1"
  }, 
  {
    id1: "3",
    cakeimage: "images/cup5.png",
    cakename: "Lemon cup cake",
    price: "£1"
  }
];

window.addEventListener('load', function () {
	
  var container = "<div class='productMainContainer'>";

  for (var i = 0; i < cakeDetails.length; i++) {
    container+="<div class='productContainers'>";
    container+="<div class='productImgContainer'>";
    container+='<img src="'+cakeDetails[i].cakeimage+'">';	
    container+="</div>";
    container+="<div class='productName'>"+cakeDetails[i].cakename+"</div>";
    container+="<div class='productPrice'>"+cakeDetails[i].price+"</div>";	
    container+="<a href=''>"+"Add to cart"+"</a>";
    container+="</div>";
  }

  container+="</div>";

  document.getElementById("productDisplay").innerHTML = container;
});
<div class="productOuterContainer" id="productDisplay"></div>

标签： javascriptjquery

解决方案

您可以使用具有onclick调用函数的属性的按钮来使产品出现在单独的 div 中。该按钮应该有一个包含产品 ID 的属性，以便在onclick调用事件处理程序时，您可以从作为参数传递给由onclick.

<button data-id="${detail.id1}" onclick="addToCart(this)">
  ${'Add to cart'}
</button>`

我们将蛋糕详细信息的 ID 插入到我们在以下函数中生成的 HTML 中。

var cakeDetails = [
  {
    id1: "1",
    cakeimage: "images/cup3.png",
    cakename: "White chocolate cheese cake",
    price: "£25"
  }, 
  {
    id1: "2",
    cakeimage: "images/cup2.png",
    cakename: "Angel cup cake",
    price: "£1"
  }, 
  {
    id1: "3",
    cakeimage: "images/cup5.png",
    cakename: "Lemon cup cake",
    price: "£1"
  }
];

function getCakeDetailForId(id) {
  for(const detail of cakeDetails) {
    if (detail.id1 === id) return detail;
  }
}

function addToCart(anchor) {
  const cakeId = anchor.getAttribute('data-id');
  const cakeDetail = getCakeDetailForId(cakeId);
  if (cakeDetail) { 
    const container = productContainerFromCakeDetail(cakeDetail);
    document.getElementById("cartDisplay").innerHTML = container;
  } else {
    console.log(`couldn't find cake detail for #${cakeId}`);
  }
}

function productContainerFromCakeDetail(detail, addToCart = false) {
  return `
    <div class="productContainers">
      <div class="productImgContainer">
        <img src="${detail.cakeimage}">
      </div>
      <div class="productName">${detail.cakename}</div>
      <div class="productPrice">${detail.price}</div>
      ${addToCart ? `<button data-id="${detail.id1}" onclick="addToCart(this)">
        ${'Add to cart'}
      </button>` : ''}
    </div>
  `;
}

function productMainContainer() {
  return `
    <div class='productMainContainer'>
      ${cakeDetails.map(detail => productContainerFromCakeDetail(detail, addToCart)).join('\n')}
    </div>
  `;
}

window.addEventListener('load', function () {
  document.getElementById("productDisplay").innerHTML = productMainContainer();
});
<aside style="float:right">
  <h2>Last Product Added</h2>
  <div id="cartDisplay">
    <!-- Last product added to cart -->
  </div>
</aside>
<h2>All Products</h2>
<div class="productOuterContainer" id="productDisplay">
  <!-- List of products -->
</div>

推荐阅读