如何为数组中指定元素添加class？评论隐藏功能异常排查

你的代码逻辑错误在于每次循环都先调用setHidden，这个函数会给所有已存在的.comment元素批量添加/移除hidden类，而非只处理当前要创建的评论：

• 处理第一个评论时，setHidden(undefined)走else分支，此时还没有评论元素，无影响，接着创建第一个评论；
• 处理第二个评论时，setHidden(true)会给已有的第一个评论加上hidden类，再创建第二个评论；
• 处理第三个评论时，setHidden(true)会给已有的前两个评论都加上hidden类，再创建第三个评论；
  最终就出现了除最后一条外都被隐藏的异常。

直接在创建评论元素时，根据当前评论的hidden参数决定是否添加hidden类，不需要批量修改已有元素：

function comments(...arr) {
  const container = document.querySelector('.comments')

  for (let item of arr) {
    // 根据当前评论的hidden状态，决定是否添加hidden类
    const hiddenClass = item.hidden ? 'hidden' : ''
    $(container).append(`<div class="comment ${hiddenClass}">${item.comment}</div>`)
  }
}

comments({
  comment: 'hi'
}, {
  hidden: true,
  comment: 'how are you'
}, {
  hidden: true,
  comment: 'where are you from?'
});

• 原代码里的async/await完全没必要，因为setHidden是同步操作，去掉后不影响逻辑；
• 循环变量不要和外层的let i = 0重名，改成item更清晰；
• 后续实现「加载更多」功能时，只需监听按钮点击，移除隐藏评论的hidden类即可：

$('.load-more').click(() => {
  $('.comment.hidden').removeClass('hidden')
})

内容的提问来源于stack exchange，提问作者Nikita Kopot