1

我是一个 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>

4

6 回答 6

3

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

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

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

于 2013-11-02T22:31:11.167 回答
1

在你的

$(this).click(function () {

“this”不是指 <script> 标签所在的位置，而是指窗口对象。所以本质上你的代码是这样做的：

$(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'});
    });
}
于 2013-11-02T22:30:01.313 回答
1

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

$('div').click(function () {
    $(this).css("color", "red");
});
于 2013-11-02T22:30:06.877 回答
1

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

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

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

于 2013-11-02T22:26:31.490 回答
1

如果您指定body元素（代替this），则它可以工作：

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

JS 小提琴演示。

当然，您也可以使用：

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

JS 小提琴演示。

如果您只希望单击元素的文本变为红色：

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

JS 小提琴演示。

于 2013-11-02T22:27:32.530 回答
1 
$(this).click(function () {

这是你的问题。

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

例如，您可以尝试

$('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
    ...
});
于 2013-11-02T22:27:40.257 回答