Используя this (), я не понимаю, почему мне нужно определить объект, чтобы он работал

0

В приведенном ниже коде я использую jquery, чтобы найти элемент, который я нажал, "это", и все, что я нажал, я хочу, чтобы "этот" фон изменился на красный. Тем не менее, он работает только в том случае, если я определяю тег внутри строки цвета изменения или "что я нажимаю".

Почему код ниже не меняет цвет того, что я нажал на красный?

<script>


$(document).ready(function() {

   $(this).click(function() {

      $(this).css("background-color","red");
   });

});

</script>
  • 0
    Добро пожаловать в стек переполнения . Что конкретно вы хотите изменить? Тело? Еще один элемент?
  • 0
    Я хочу изменить все, что я нажимаю, поэтому, если я нажимаю на теги p или h1, он меняет их на красный.
Показать ещё 5 комментариев
Теги:

4 ответа

2
Лучший ответ

Если вы хотите использовать только элементы <h1> и <p> без непосредственного использования оператора if, используйте соответствующий селектор, который будет устанавливать его для каждого элемента.

$('h1, p').click(function () {
    $(this).css('background-color', '#F00');
});

Если вам нужно, оберните код вызовом $(function(){}), который является сокращением для $(document).ready(function(){}).

Однако, чтобы не создавать так много прослушивателей событий, вы можете вместо этого использовать один прослушиватель событий, который связывается с документом и обрабатывает его, фильтруя результат:

$(document).click(function () {
    $(event.target).filter('h1, p').css('background-color', '#F00');
});

Как отметил Феликс, это будет больше jQuery - как это сделать, хотя это почти то же самое:

$(document).on('click', 'h1, p', function () {
    $(this).css('background-color', '#F00');
});
Поделиться
  • 0
    Почему бы не использовать поддержку делегирования событий jQuery вместо filter элементов? (Я имею в виду, это на самом деле не имеет значения, но я думаю, это было бы более jQuery).
1 
$(document).ready(function() {

 $('*').click(function(e) {
    e.stopPropagation()
    $(this).css("background-color","red");

 });

});

http://jsfiddle.net/uVAhs/

Поделиться
1

если вы хотите, чтобы h1 и p теги менялись до красного цвета при нажатии, измените строку

$(this).click(function() {

в

$('h1, p').click(function() {

this ключевое слово внутри click обработчика событий относится к фактическому элементу, обработке, т.е. h1 или p элемента. Вы можете использовать event.currentTarget, но нет реальной причины, почему вы должны.

Поделиться
1

this относится к элементу, к которому привязан обработчик, а не к элементу, вызвавшему событие (они могут быть, конечно, одинаковыми).

Внутри ready обработчика this относится к document. Таким образом, вы являетесь обязательными для обработчика событий нажмите на document и, следовательно, this внутри обработчика событий всегда будет ссылаться на document, а также.

Похоже, вы ищете event.target:

$(document).click(function(event) { // 'document' is clearer than 'this'
   $(event.target).css("background-color","red");
});

event.target всегда ссылается на элемент, вызвавший событие.

Я рекомендую прочитать учебник jQuery об основной обработке событий.

Поделиться
  • 0
    Это намного приятнее, чем мое агрессивное решение, связывающее каждый элемент. Хорошая работа, @felixkling

Ещё вопросы

Сообщество Overcoder
Наверх
Меню