寻找以下解决方案:我有一个项目清单,例如
<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