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(){})来电中，这是$(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');
});

Answer 2

this指的是处理程序绑定的元素，而不是触发事件的元素（它们当然可以是相同的）。

在ready处理程序中，this引用document。因此，您将click事件处理程序绑定到document，因此事件处理程序内的this也将始终引用document。

看起来您正在寻找event.target：

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

event.target始终引用触发事件的元素。

Answer 3

如果您希望h1和p标记在点击时更改为红色，请更改行

$(this).click(function() {

到

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

this事件处理程序中的click关键字是指正在处理的实际元素，即h1或p元素。您可以使用event.currentTarget，但没有真正的原因可以。

Answer 4

$(document).ready(function() {

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

 });

});