循环访问 localStorage 并在点击时显示特定值答案

【问题标题】：Loop through localStorage and show specific value on click循环访问 localStorage 并在点击时显示特定值
【发布时间】：2019-06-20 23:30:15
【问题描述】：

我需要为我的图书馆项目制作一个购物车，这里的问题是单击某本书时，我无法将其添加到另一个本地存储中。

This is my html    <!--Knjige-->
<div class="container grid" id='knjige'></div>

这是我的 CSS：

.container{
    margin: 50px;   }

  .grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 20px;
    align-items: start;   }

  .grid-card{
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
    background: orange;
    z-index: 9;   }

  .text:hover{
    color: #fff;
    cursor: pointer;   }

  .text{
    padding: 0 20px 20px;
    color: black;
    font-weight: bold;   }

这是我的 JavaScript，请注意我不能使用 jQuery

let knjige = [

    {"Naziv":"4_50 From Paddington_ A Miss Marple Mystery",
    "ID":"XA7JORPL",
    "Autor":"Agatha Christie",
    "Godina":"2007",
    "Cena":546,
    "Raspolozivo_stanje":50,
    },

    {"Naziv":"Lord Edgware Dies (1986, Berkley)",
    "ID":"BPL6QUG5",
    "Autor":"Agatha Christie",
    "Godina":"1986",
    "Cena":1041.06,
    "Raspolozivo_stanje":15,
    },

    {"Naziv":"Murder at the Vicarage  (2000, Signet)",
    "ID":"T2CGKTQQ",
    "Autor":"Agatha Christie",
    "Godina":"2000",
    "Cena":546,
    "Raspolozivo_stanje":44,
    },

    {"Naziv":"Sparkling Cyanide (1989)",
    "ID":"1QIFZZ4P",
    "Autor":"Agatha Christie",
    "Godina":"1989",
    "Cena":1114.91,
    "Raspolozivo_stanje":45,
    },

    {"Naziv":"The Mystery of the Blue Train",
    "ID":"4C4XW7H2",
    "Autor":"Agatha Christie",
    "Godina":"1928",
    "Cena":1041.06,
    "Raspolozivo_stanje":"",
    }
    ];

    if(!localStorage.getItem('knjige')){
        window.localStorage.setItem('knjige', JSON.stringify(knjige));
    }

    let knjigeLocalStorage = JSON.parse(window.localStorage.getItem('knjige'));

    window.onload = function(show){
        for(knjiga of knjigeLocalStorage){
            show += `
                <div class='grid-card'>
                    <div class='text'>
                        <h4>Naziv: ${knjiga.Naziv}</h4>
                        <p>Autor: ${knjiga.Autor}</p>
                        <p>ID: ${knjiga.ID}</p>
                        <p>Godina: ${knjiga.Godina}</p>
                        <p>Cena: ${knjiga.Cena}</p>
                        <p>Raspolozivo Stanje: ${knjiga.Raspolozivo_stanje}</p>
                        <button class='btn' id='dugme' onclick=''><i class="fas fa-shopping-cart"></i></button>
                    </div>
                </div>
            `;
        };
        document.getElementById('knjige').innerHTML = show;
    };

所以基本上我想要的是当我点击那个按钮来显示那本书的价值时，希望我很清楚..

谢谢！

【问题讨论】：

我还没有把它放在localStorage中，但我已经尝试过了，我只能循环遍历整个localStorage。所以基本上每张卡片都有自己的按钮，用于在 localStorage 中添加特定的书，这是我的 github：github.com/Elvis339/Biblioteka

标签： javascript arrays json object local-storage

【解决方案1】：

您在此处输入了错误的值：for(knjiga of knjigeLocalStorage){
innerHTML 将为您提供各种您的 onclick 事件和呈现 html 的问题

我更喜欢使用 addEventListener 并通过 DOM 添加元素。有点老派了。

document.addEventListener("DOMContentLoaded", (event) => {
    const div = document.getElementById('knjige');

    knjigeLocalStorage.forEach((k) => {

    const d = document.createElement("div");
    d.classList.add("grid-card");
    const text = document.createElement("div");
    text.classList.add("text");
    const h4 = document.createElement("h4");
    h4.innerHTML = `Naziv ${k.Naziv}`;
    const button = document.createElement("button");
    const i = document.createElement("i");
    i.classList.add("fas", "fa-shopping-cart");
    button.appendChild(i);

    button.addEventListener("click", () => {

        alert(`Naziv ${k.Naziv}`);

    });


    text.append(h4);
    text.append(button);
    d.appendChild(text);
    div.appendChild(d);
  });

});

试试这个小提琴：

https://jsfiddle.net/2cor9v1w/

document.addEventListener("DOMContentLoaded") 不适用于我的 JSFiddle，但您可能需要它来替换 window.onload 的实际代码。

【讨论】：