クラスに属する特定のボタンにCSSルールを適用します。

Question

たとえば、ブログ投稿を表示するWebページがあります。各ブログの投稿には、「コメント」ボタンと「好き」ボタンがあります。ユーザーが投稿を好きなときは、その特定のボタンに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のすべての要素を選択する代わりに、クリックイベントを受け取った特定の要素をターゲットにしてみてください（eventオブジェクトを使用して、 "like。like"ハンドラに渡します）。これは、この場合のeventがtargetプロパティを持つeventオブジェクトを表していることを前提としています。

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) 
} 

ます。また、リンクを使用してカーソルを移動することができ、かつアクティブな疑似クラス。

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

Answer 4

HTMLCollectionを返しdocument.getElementsByClassName：ここに参照です。あなたはこのコレクションを反復し、あなたがそれをクリック上の要素にクラスを追加するためにイベントリスナーを追加することができ、コールバック関数の内部で

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