0

寻找以下解决方案：我有一个项目列表，例如

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>...</li>
</ul>

每次他们查看网站上的产品（即“最近查看的项目”）时，都会将列表添加到（针对每个人），最后查看的产品会添加到列表的底部。该列表取自 MYSQL 数据库。该列表不会为该人重置，每次查看该网站的同一个人查看更多产品时，该列表只会变长。

在记住新的列表项被添加到列表的底部并且列表不断增长之前，是否只显示列表中的最后 5 个项目而忽略这些项目？

我希望列表在任何时候只显示每个查看该网站的人的最后五种产品，即网站上的列表可能

  • 项目 1
  • 第 2 项
  • 第 3 项
  • 第 4 项
  • 第 5 项
  • 第 6 项
  • 第 7 项
  • 第 8 项
  • 第 9 项
  • 项目 10
  • 项目 11
  • 第 12 项
  • 第 13 项
  • 第 14 项
  • 项目 15
  • 第 16 项

但我只希望浏览了所有 16 种产品的人只看到最近浏览过的 5 种产品，即

  • 项目 11
  • 第 12 项
  • 第 13 项
  • 第 14 项
  • 项目 15
  • 第 16 项

另一个人可能会访问该站点并仅查看 4 种产品，例如

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

他们会在最近查看的列表中看到这 4 种产品。

第三人可能会来到该网站并查看 12 种产品，他们会看到

<ul>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>

当上面查看了 16 个项目的人返回网站时，他们将看到上一次会话的最后 5 个项目，当他们开始查看产品时，第一个项目将消失，列表底部将显示一个新项目

<ul>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
</ul>

然后当他们开始浏览时，他们会看到

  • 第 12 项
  • 第 13 项
  • 第 14 项
  • 项目 15
  • 第 16 项
  • 第 17 项
ETC...

这可能吗？

4

2 回答 2

2

我将保留我之前回答的所有内容，但我相信问题的范围已经改变，现在是一个数据库/sql 问题。

我认为您正在寻找的是一个 SQL 查询来限制返回的行数并为您排序。

您可以查看MySQL 5.0 SELECT的文档，它可以让您了解如何执行此操作，但我也会在下面给您一个示例。

假设您有一个最近查看的项目表，如下所示：

CREATE TABLE user_product_viewings (
    ID INT(32) NOT NULL auto_increment,
    product_id INT(32)  NOT NULL,
    user_id INT(32)  NOT NULL,
    viewed_at DATETIME NOT NULL,
primary KEY (ID));

您可以使用以下查询为特定用户选择 5 个最新条目：

SELECT product_id FROM user_product_viewings WHERE user_id = #{USER_ID} ORDER BY viewed_at DESC LIMIT 5;

旧答案

看起来您正在尝试使用 javascript 执行此操作，因此您可能会在用户浏览页面时将数据附加到列表中。

我不会简单地尝试隐藏这些项目，而是将它们从 DOM 中完全删除。最好的方法是编写一个函数来检查列表的当前长度，然后在添加新的之前删除最老的孩子（顶部）。

这方面的一个例子可能类似于以下内容：

  var addToList = function (item_value) {
    while ( list.children.length >= 5 )
    {
      list.removeChild(list.firstChild );
    }

    var item = document.createElement("li");
    item.innerText = item_value;

    list.appendChild(item);
  }

http://jsbin.com/oriwut/3/edit

这是另一个解决方案，它结合了上述内容，仅显示 10 项列表的最后 5 项。

  var addToList = function (item_value) {

    while ( list.children.length >= 10 )
    {
      list.removeChild(list.firstChild );
    }

    var item = document.createElement("li");
    item.innerText = item_value;

    list.appendChild(item);

    list.scrollTop = list.scrollHeight;

  }

一点CSS：

#list {
   overflow-x:scroll;
   width: 100px;
   height: 120px;
}

#list li {
   height: 20px;
}

http://jsbin.com/ujuxer/2/edit

于 2013-03-22T17:48:08.097 回答
1

您可以使用以下 CSS，但我不确定浏览器兼容性（不清楚这是否是正确的兼容性表）：

li { display: none; } 
li:nth-last-child(-n+5) {
    display: list-item;
}

http://jsfiddle.net/TzDqV/

于 2013-03-22T17:45:01.153 回答