特定のクラス/ IDを呼び出す

Question

私はショッピングカートを持っており、アイテムが追加されるとごみ箱アイコンが表示されます。動作する現在のスクリプトがありますが、ページ内のすべての 'onclick'関数を対象としています。私はこれを目標にしたいと思う（ゴミ箱は1​​つ）。アイコンのコードは次のとおりです。

<td class="total"> 
    <span class="close" style="color:#f00;"> 
    <i class="fa fa-trash"></i> 
    </span> 
</td> 

現在JavaScriptがこのようなものです：私はほんの始まりを示すんだけれども

$(document).ready(function() { 

$('body').on('click','.close', function(){ 
var here = $(this); 
var rowid = here.closest('tr').data('rowid'); 

は、より多くのJavaScriptをtheresの。

私はこのようなことを試みましたが、何も機能しませんでした。

$(document).ready(function() { 
    var trash = document.getElementsByClassName("fa fa-trash"); 
    trash.on('click', '.close', function(){ 
    var here = $(this); 

正しいトラックにいるかどうかわかりません。

Answer 1

私が正しくあなたを理解していれば、あなただけのゴミのアイコンにclickイベントをバインドしたいですか？

その場合は...

$(document).ready(function() { 
    $('body').on('click','.fa.fa-trash', function(){ 
    var here = $(this); //This variable now equals the clicked trash element. 
    var rowid = here.closest('tr').data('rowid'); 

さらに、それはjQueryの要素が含まれている場合、変数の前に$記号を使用することをお勧めします。そうすれば、あなたと他の誰かがコードを読んで要素を区別し、実行されるjQueryメソッドを持つ変数を知ることができます。

var $here = $(this); 

Answer 2

交換してください、あなたはforループを反復処理する必要がありますし、それぞれのために特別イベントをバインドdocument.getElementsByClassNameを使用して、あなたが要素を取得するためにJSを使用する場合は

var trash = $(".fa.fa-trash"); 

と

var trash = document.getElementsByClassName("fa fa-trash"); 

、 。

var trashes = document.getElementsByClassName("fa fa-trash"); 
    for(var i=0; i< trashes.length; i++) { 
    var $trash = trashes[i]; 

    $trash.on('click', '.close', function() { 

    ... 
    } // end of for loop 

使用querySelectorAll

var trash = document.querySelectorAll(".fa.fa-trash"); 
    trash.on('click', ...