Question

我是一个jQuery初学者，想要实现以下目标 - 每当我点击页面的任何元素时，我都希望其中的文本颜色变为红色。这就是我所拥有的，但它不起作用。令人惊讶的是，警报声明也没有打印。但它确实执行，因为我用另一个警告声明测试它。感谢。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div>Cow</div>
    <div>Cat</div>
    <p>paragraph</p>
    <p>coconut</p>

    <script type="text/javascript" src="../Scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(this).click(function () {
            var v = $(this).text();
            alert(v); // this prints nothing !!!!
            $(this).css("color", "red");
        });
    </script>
</body>

Answer 1

如果您将点击处理程序附加到document，任何冒泡到文档的点击都将转到事件监听器。如果您现在在侦听器中查找event.target，那将是启动该事件的节点：

$(document).click(function (event) {
  $(event.target).css("color", "red");
});

示例：http://jsfiddle.net/E9H22/

Answer 2

如果您指定body元素（代替this），那么它可以正常运行：

$('body').click(function () {
    var v = $(this).text();
    alert(v); // this prints something, now.
    $(this).css("color", "red");
});

JS Fiddle demo

当然，你也可以使用：

$(this.document.body).click(function () {
    var v = $(this).text();
    alert(v); // this prints something, now.
    $(this).css("color", "red");
});

JS Fiddle demo

如果您只想让clicked-element的文字变为红色：

$('body').click(function (e) {
    $(e.target).css("color", "red");
});

JS Fiddle demo

Answer 3

在你的

中

$(this).click(function () {

“this”未指代＆lt; script＆gt;的位置标签位于，但它指的是窗口对象。所以从本质上讲，你的代码就是这样做的：

$(window).click(function (){

如果您希望奶牛变红，点击它时，请将HTML更改为：

<div id="cow">Cow</div>

你的剧本：

// callback needs to be inside $(document).ready(fn) to make sure the DOM is ready when trying to use it
$(document).ready(function () {
    // and we need to refer to an explicit element
    $('#cow').click(function (){
        // now we can refer to "this", since inside the click handler's context is the clicked element
        $(this).css({color: 'red'});
    });
}

Answer 4

您需要将其包装在文档就绪语句中，并将单击侦听器附加到实际元素：

$(function(){
  $("*").click(function () {
    $(this).css("color", "red");
  });
});

您的选择器看起来像$("div, p").click(...)，具体取决于您想要激活的元素。

Answer 5

$(this).click(function () {

这是你的问题。

您需要使用CSS选择器来指定哪些元素会改变颜色，而不是说this。

例如，您可以尝试

$('div').click(function() { // Will change the color of the divs
     var v = $(this).text();
     alert(v); // this prints nothing !!!!
     $(this).css("color", "red");
}); 
$('p').click(function() {  // Will change the paragraphs
    ...
}); 
$('p, div').click(function() {  // Will work for either one!
    ...
}); 
$('*').click(function() {  // Will work for any element on the page
    ...
});

Answer 6

您必须指定要添加点击事件的元素。例如。这适用于所有div元素：

$('div').click(function () {
    $(this).css("color", "red");
});

单击jQuery更改颜色

6 个答案: