Вызов определенного класса/ID

Question

У меня есть корзина для покупок, и после того, как элемент добавлен, появляется значок корзины. Существует текущий скрипт, который работает, но он нацелен на все функции onclick на странице. Я просто хотел бы, чтобы он нацелился на этот (мусорный ящик). Вот код для значка.

<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'); 

Theres более JavaScript, хотя я просто показывает начало.

Я пробовал что-то вроде этого, но ничего не работало.

$(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

Заменить

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

с

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

Если вы хотите использовать JS для извлечения элементов, используя document.getElementsByClassName, то вам придется перебрать для цикла и связать события специально для каждого ,

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', ...