Обоснование за $ (this) в jQuery

Question

Я пытаюсь создать небольшой скрипт с использованием jQuery, и я столкнулся с roadblock. Мой сценарий о превращении каждом щелкнул объекты таблицы в определенном стиле в CSS, используя класс .trHighlight в моем сценарии, как показано ниже:

$(document).ready(function() {   
    $('tr').bind('click', function() { 
    $(this).addClass('trHighlight'); 
    }); 
}); 

Я сейчас пытаюсь вернуться в стиле нормального при нажатии снова на каждой строке таблицы (каждый tr-объект). Я попробовал следующий сценарий:

$(document).ready(function() {   
    $('tr').bind('click', function() { 
    $(this).addClass('trHighlight'); 
    }); 
    $('tr .trHighlight').bind('click', function() { 
    $(this).removeClass('trHighlight'); 
    }); 
}); 

Конкретная структура не слишком помогает. У вас есть идея? Другой вопрос: есть ли у вас описание всех свойств, которые могут быть адресованы через this.x, например this.id, возможно, я попытаюсь найти способ, используя свойство класса «this».

Благодаря

Answer 1

Вы можете просто использовать toggleClass():

$(document).ready(function() { 
    $('tr').bind('click', function() { 
    $(this).toggleClass('trHighlight'); 
    }); 
}); 

и могли бы рассмотреть, чтобы изменить bind() к on(). Оба будут работать, за плюсы и минусы обоих в качестве ссылки: jquery .bind() vs. .on().
Вы можете использовать .on(), если он имеется с .bind() устарел. Но, как заметка на полях - bind() функция переписан для on() - http://james.padolsey.com/jquery/#v=2.0.3&fn=$.fn.bind (актуализированной информации, извлеченной из этого ответа:. jquery .bind() vs. .on()

Answer 2

@matthias_h его ответ путь Однако, для полноты изложения я просто хочу, чтобы сообщить вам, что у вас которое было проблемой: $('tr .trHighlight') выбирает элемент (независимо от того, какой) с классом trHighlight, который является потомком строки таблицы. То, что вы хотели, хотя и является строкой таблицы, то имеет сам класс, а не один из его потомков. Выбор определенного семантического элемента, который имеет класс, можно сделать, подключив класс и элемент, например: $('tr.trHighlight'). Однако ваш последний скрипт будет выглядеть следующим образом: - Ответ matthias_h - это то, что вы должны использовать в этом случае.

$(document).ready(function() { 
    $('tr').bind('click', function() { 
     $(this).addClass('trHighlight'); 
    }); 
    $('tr.trHighlight').bind('click', function() { 
     $(this).removeClass('trHighlight'); 
    }); 
}); 

Answer 3

У вас есть некоторое непонимание того, как работает JavaScript. Важно знать, что JavaScript запускается один раз. После запуска он только прослушивает (и запускает функцию при запросе).

Так вы текущее событие связывания на обоих $('tr') и $('tr . trHighlight') (кстати, там не должно быть пространство между меткой и имя класса), но класс trHighlight добавляется только при нажатии на tr. Этого не происходит, когда JavaScript запускается, поэтому к элементу, который удаляет класс, не будет подключен прослушиватель событий.

Именно поэтому существует система делегирования событий. Basicaly, вы присоединяете событие к родительскому статическому элементу, и он урок к нему и сравнивает цель события с его предком. Если сравнение соответствует селектору, событие успешно выполнит код.

Я говорю здесь о методе .on с селектором в качестве аргумента. Этот код будет работать:

$(document).ready(function() {   
    $('table').on('click', 'tr:not(.trHighlight)', function() { 
     $(this).addClass('trHighlight'); 
    }); 
    $('table').on('click', 'tr.trHighlight', function() { 
     $(this).removeClass('trHighlight'); 
    }); 
}); 

Но это не рекомендуется в вашей ситуации.Вы меняете только класс, и у jQuery есть функция для этого: .toggleClass.

Это означает, что вы можете связать одно событие с tr независимо от того, имеет ли он класс или нет. .toggleClass будет оценивать вас, если необходимо удалить или добавить класс. Это так же просто, как:

$(document).ready(function() {   
    $('tr').on('click', function() { 
     $(this).toggleClass('trHighlight'); 
    }); 
});