javascript - 为属于某个类的特定按钮应用 CSS 规则

Question

例如，我有一个显示博客文章的网页。每篇博文都有一个“评论”按钮和一个“喜欢”按钮。当用户喜欢某个帖子时，我想为该特定按钮应用 CSS 样式。我尝试了很多方法，例如使用“getElementsByClassName”来获取按钮的类，但它对所有按钮应用规则。因此，如果我有 5 篇博客文章，当我只喜欢其中一篇时，它们似乎都被点赞了。这是我的 JS 代码:

Template.post.events({
"click .like":function(event) {
 var likeButton1=document.getElementsByClassName('like');
 $(likeButton1).addClass('likeClick');
 var nrLikes=parseInt(this.likes);
 blogPosts.update(
   this._id,{
     $set:{"likes":nrLikes+1}
  }
);
}
});

这是我的 html 代码:

<input class="like" type="submit" name="like" value="Like"/>

基本上我需要那个特定点击按钮的实例，我该怎么做？提前致谢!

Answer 1

document.getElementsByClassName 返回一个 HTMLCollection。您可以遍历此集合并通过执行以下操作来使用数组方法

Array.prototype.forEach.call(HTMLCollection,callBackFunction)

在回调函数中，您可以添加一个事件监听器，以便在单击它时在元素上添加类。

下面是一个可能有用的片段。classList.add 将向现有元素添加一个新类

var likeButton1 = document.getElementsByClassName('like');
Array.prototype.forEach.call(likeButton1, function(el) {
  el.addEventListener('click', function() {

    this.classList.add('likeClick')
  })
});

.likeClick {
  color: green
}

<input class="like" type="submit" name="like" value="Like" />
<input class="like" type="submit" name="like" value="Like" />
<input class="like" type="submit" name="like" value="Like" />
<input class="like" type="submit" name="like" value="Like" />
<input class="like" type="submit" name="like" value="Like" />
<input class="like" type="submit" name="like" value="Like" />
<input class="like" type="submit" name="like" value="Like" />