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

【问题标题】：Apply a CSS rule for a specific button that belongs to a class为属于某个类的特定按钮应用 CSS 规则
【发布时间】：2017-06-17 20:30:54
【问题描述】：

例如，我有一个显示博客文章的网页。每篇博文都有一个“评论”按钮和一个“喜欢”按钮。当用户喜欢某个帖子时，我想为该特定按钮应用 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"/>

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

【问题讨论】：

尝试将$(likeButton1).addClass('likeClick');更改为$(this).addClass('likeClick');

标签： javascript jquery html css meteor

【解决方案1】：

document.getElementsByClassName 返回一个 HTMLCollection。您可以遍历此集合并通过执行

来使用数组方法

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

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

下面是一个可能有用的sn-p。 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" />

【讨论】：

【解决方案2】：

使用这个 jQuery 代码

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

【讨论】：

【解决方案3】：

不要选择类like 的所有元素，而是尝试定位接收到点击事件的特定元素（使用您传递给“click .like”处理程序的event 对象）。这假定在这种情况下event 代表一个event 对象，当然，该对象具有target 属性。

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

【讨论】：

【解决方案4】：

听起来您想使用 CSS 伪类。这就是您如何为已单击或访问过的按钮设置样式。这一切都可以在您的 css 文件中完成。

示例 css 文件：

input .like {
  (some css styling)
}

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

您还可以使用链接、悬停和活动伪类。以下是参考：

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

【讨论】：