Question

我有一个显示博客帖子的网页。每篇博客文章都有一条评论＆＃39;按钮和＆＃39;喜欢＆＃39;按钮。当用户喜欢帖子时，我想为该特定按钮应用CSS样式。我已经尝试过很多方法，例如使用＆＃34; getElementsByClassName＆＃34;获取按钮的类，但它适用于所有按钮的规则。因此，如果我有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会向现有元素添加新类

＆＃13;

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

＆＃13;

.likeClick {
  color: green
}

＆＃13;

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

＆＃13;

Answer 2

不要选择课程like中的所有元素，而是尝试使用您接收点击事件的特定元素（使用event对象传递到您的＆＃34;点击喜欢＆＃34;处理程序）。这假设在这种情况下event表示具有event属性的target对象。

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

Answer 3

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

示例css文件：

input .like {
  (some css styling)
}

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

您还可以使用link，hover和active psuedo类。这是参考：

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

Answer 4

使用此jQuery代码

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

为属于类的特定按钮应用CSS规则

4 个答案: