Перебирайте localStorage и показывайте конкретное значение при клике - PullRequest
Новая
       20

Перебирайте localStorage и показывайте конкретное значение при клике

0 голосов
/ 28 января 2019

Мне нужно сделать корзину для моего библиотечного проекта, проблема в том, что я не могу добавить ее в другой localStorage, щелкнув по определенной книге. 

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

Так что в основном то, что я хочукогда я нажимаю на эту кнопку, чтобы показать ценность этой конкретной книги, надеюсь, что я был ясен ..

Спасибо!

1 Ответ

0 голосов
/ 28 января 2019
  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);
  });

});

Попробуйте эту скрипку:

https://jsfiddle.net/2cor9v1w/

document.addEventListener ("DOMContentLoaded") Doesn 'я не могу работать с JSFiddle, но вам может понадобиться, чтобы ваш реальный код заменил window.onload.

...