为属于某个类的特定按钮应用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

使用此jQuery代码

$('.class_name').each(function() { 
     $(this).addClass('likeClick'); 
    }); 

Answer 2

而不是选择like类的所有元素，试着瞄准接收到单击事件的特定元素（使用您传入“click.like”处理程序的event对象）。这里假定event在这种情况下代表event对象，它当然具有target属性。

var likeButton1= event.target; // this will be the element that received the `click` 
$(likeButton1).addClass('likeClick'); 

Answer 3

这听起来像你想使用CSS psuedo类。这就是你如何设计一个被点击或访问过的按钮的样式。这一切都可以在你的css文件中完成。

范例CSS文件：

input .like { 
    (some css styling) 
} 

input .like:visited { 
    (different css styling) 
} 

您还可以使用链接，悬停，并积极伪类。这里的参考：

https://www.w3schools.com/css/css_pseudo_classes.asp

Answer 4

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" />