寻找以下解决方案:我有一个项目清单,例如

<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
    
 等等...

这可能吗?

最佳答案

我将保留先前回答中的所有内容,但我相信问题的范围已更改,现在是数据库/ 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

10-08 13:18
查看更多