Question

function randomEmoji() {
  var emojis = [
    ':)', ':(', '=D', 'xD', 'o_O', ':|', ':-O', ':$'
  ];
  return emojis[ Math.floor( Math.random() * emojis.length ) ];
}
function textscroll(){
  $('.messages').append("<li>" + randomEmoji() + "</li>");
}
setInterval(textscroll,3000);
function scroll(){
$('.messages').children().hide();
}
setInterval(scroll,5900);

正如您所看到的，我的代码每3秒向.messages（我的HTML文件中的无序列表）附加一个随机表情符号。我怎样才能将此限制为仅显示最近的10个表情符号？我试图隐藏列表并在添加新列表时显示它。它不仅不会这样做，它还会继续将它们列在页面上。我不知道接下来该做什么，这不是家庭作业或任何实际上值得的，只是一个奇怪的问题，这让我在过去几天疯狂。除了使用.hide（）之外还有吗？我觉得每4秒使用一次.hide（）对眼睛来说很难。我已经搜索过MDN，在我的代码中找到了可以实现的东西，但没有运气。

Answer 1

在您追加随机表情符号之后，只需检查列表项的计数，如果它超过10，则删除第一个，然后您将全部设置。

function textscroll () {
    $('.messages').append("<li>" + randomEmoji() + "</li>");
    if ( $('.messages li').length > 10 ) {
        $('.messages li').first().remove();
    }
}

Answer 2

槽糕。我认为在这种情况下我会做的是查看列表的长度。如果列表的长度> 10。只需删除第一个元素。如果你想出于某种原因想要跟踪所有表情符号，但只显示最近的十个，你可以有类似的逻辑，但是你可以选择列表中没有第一个元素而不是删除第一个元素一些自定义类...说你创建的“last10”，然后在向列表中添加项目时将该类附加到项目...然后你只显示所有具有“last10”类的项目。

更具体一点：你要找一个没有“last10”类的项目附加该类，然后隐藏该项目。

Answer 3

尝试这样的事情（http://jsfiddle.net/3CBKP/1/）：

每次添加新列表项时，请检查长度是否超出限制：

var messageLimit = 10;

function randomEmoji() {
  var emojis = [
    ':)', ':(', '=D', 'xD', 'o_O', ':|', ':-O', ':$'
  ];

  return emojis[ Math.floor( Math.random() * emojis.length ) ];
}

function textscroll(){
  var $messages = $('.messages');
  var $children = $messages.children();

  $messages.append("<li>" + randomEmoji() + "</li>");

  if($children.length > messageLimit) {
    // there are too many, remove the oldest
    $children.first().remove();
  }
}

setInterval(textscroll, 100);

设置附加列表项的限制

3 个答案: