爲屬於某個類的特定按鈕應用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" />