javascript - 添加到收藏夹数组

Question

我想在 Javascript/Jquery 中做的是能够单击一个按钮（每个项目上的一个按钮），将其添加到数组中。然后，当您单击收藏夹页面时，该数组将按顺序发布。

我只是很难理解这将如何工作。因为我可能希望数组中的每个项目都包含一些内容，例如描述该项目的图片和文本。

在一般条款/示例中，这将如何设置？

Answer 1

有很多方法可以做到这一点。但是，我会选择一个更通用的 - 你可以为自己扩展：

http://jsfiddle.net/TEELr/11/

HTML：这只是用最喜欢的类创建不同的元素——这将是我们检查一个元素是否被点击的选择器。

<div class="favorite"><p>Add to favorites</p></div>
<div class="favorite type2"><p>Just another favorite type</p></div>

<button id="reveal">
    Reveal Favorites
</button>

JS：

每次单击具有“最喜欢”的 CSS 类的元素时，它都会被添加到数组中 - 这也适用于具有多个类的元素（具有“最喜欢的”CSS 类）。

现在，当单击“显示收藏夹”按钮时，它将提醒数组中的内容 - 按单击的顺序（按要求）。

$(document).ready(function() {
    var favorites = [];
    var counter = 0;

    $('.favorite').click(function() {
        ++counter;
        favorites.push("\"" + $(this).text() + " " + counter + "\"");
    });

    $('#reveal').click(function() {
       alert(favorites); 
    });
});

CSS：

仅出于演示目的而存在的简单 CSS，以使用多个 CSS 类选择器证明前面的观点：

.favorite {
    width: 400px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    display: block;
    background-color: #f3f3f3;
    border-bottom: 1px solid #ccc;
}

.favorite.type2 {
    background-color: #ff3;
}

.favorite:hover {
    cursor:hand;
    cursor: pointer;
}