javascript - 使用 this()，不明白为什么我需要定义一个对象才能使其工作

Question

在下面的代码中，我使用 jquery 查找我单击的元素“this”，无论我单击什么，我都希望“this”背景更改为红色。但是，只有当我在更改颜色线或“我点击了什么”线内定义标签时，它才有效。

为什么下面的代码不会将我点击的任何内容的颜色更改为红色？

<script>


$(document).ready(function() {

   $(this).click(function() {

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

});

</script>

Answer 1

如果您只想要 <h1>和<p>不直接使用 if 的元素语句，使用适当的选择器，这将在每个元素上设置它。

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

如果需要，请将代码包装在 $(function(){}) 中call，它是 $(document).ready(function(){}) 的简写.

但是，为了不创建如此多的事件监听器，您可以使用绑定(bind)到文档的单个事件监听器并通过过滤结果来处理该事件:

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

正如 Felix 所指出的，这样做会更像 jQuery，尽管这实现了几乎相同的效果:

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