主页 / 问题 / 767654
Accepted
Alexey Giryayev
Asked:2020-01-07 21:32:29 +0000 UTC2020-01-07 21:32:29 +0000 UTC

检查数组中是否存在属性

  • 772

有一个元素，当点击时，数据被添加到数组中：

<a href="#" data-name="Apple" data-id="1" data-img="http://site.com/image.jpg" data-link="http://site.com/page">Item1</a>
<a href="#" data-name="IBM" data-id="2" data-img="http://site.com/image.jpg" data-link="http://site.com/page">Item2</a>

这些是脚本的重要部分：

var myCart = (function () {

    var cart = [];

    function Item(name, id, img, link) {
        this.name = name;
        this.id = id;
        this.img = img;
        this.link = link;
    }

    function saveCart() {
        localStorage.setItem("myCart", JSON.stringify(cart));
    }

    function loadCart() {
        cart = JSON.parse(localStorage.getItem("myCart"));
        if (cart === null) {
            cart = [];
        }
    }

    loadCart();

    var obj = {};

    obj.addItemToCart = function (name, id, img, link) {
        for (var i in cart) {
            if (cart[i].name === name) {
                saveCart();
                return;
            }
        }

        var item = new Item(name, id, img, link);
        cart.push(item);
        saveCart();
    };

})();

$("a").click(function(event){
    event.preventDefault();
    var name = $(this).attr("data-name");
    var id = Number($(this).attr("data-id"));
    var img = $(this).attr("data-img");
    var link = $(this).attr("data-link");

});

单击链接时可以添加该类，但重新加载页面后它会自然消失。数组的内容存储在缓存中。如何检查数组的内容以获取像 id 这样的单个属性并将类添加到包含该属性的元素？

javascript

1 个回答

  1. Best Answer
    var someId = ...;
var someClass = ...;
var arrayFromCache = ....;

if (arrayFromCache.find(function(item) { return item.id == someId; })) {
  $("a[data-id='" + someId + "']").addClass(someClass);
}

    更新

    (function () {

    var cart = [];

    function Item(name, id, img, link) {
        this.name = name;
        this.id = id;
        this.img = img;
        this.link = link;
    }

    function saveCart() {
        localStorage.setItem("myCart", JSON.stringify(cart));
    }

    function loadCart() {
        var stored = localStorage.getItem("myCart");
        if (stored) {
          cart = JSON.parse(stored);
          for(var i = 0; i < cart.length; i++) {
            $("a[data-id='" + cart[i].id + "']").addClass(someClass);
          }
        } else {
          cart = [];
        }
    }

    loadCart();

    function addItemToCart(name, id, img, link) {
        for (var i in cart) {
            if (cart[i].name === name) {
                return;
            }
        }

        var item = new Item(name, id, img, link);
        cart.push(item);
        saveCart();
    }

    $("a").click(function(event){
        event.preventDefault();
        var name = $(this).attr("data-name");
        var id = Number($(this).attr("data-id"));
        var img = $(this).attr("data-img");
        var link = $(this).attr("data-link");

        addItemToCart(name, id, img, link);
    });
})();
    • 1

相关问题