javascript - 循环遍历 localStorage 并在单击时显示特定值

Question

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

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;
    };

所以基本上我想要的是当我单击该按钮时显示该特定书籍的值(value)，希望我很清楚..

谢谢!

Answer 1

1. 您在此处输入了错误的值:for(knjiga of knjigeLocalStorage){
2. 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);
  });

}); 

试试这个 fiddle :

https://jsfiddle.net/2cor9v1w/

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