点击jQuery改变颜色

我是一名jQuery初学者，希望实现以下目标 - 无论何时点击页面的任何元素，我都希望其中的文本颜色改为红色。这是我的，但它不起作用。令人惊讶的是，警报声明也没有打印任何内容但它确实执行，因为我用另一个警报语句测试了它。谢谢。点击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>

来源

2013-11-02 VVV

而且你能指望什么'$（这）'是？ –

页面的任何元素 - p，div，a等 – VVV

如果将单击处理到document，即冒泡到文档的任何点击将进入事件侦听器。如果您现在收听内查找event.target，这将是引发事件的节点：

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

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

来源

2013-11-02 22:31:11 Niklas

非常感谢Niklas，你的方法能够正确地工作，但事实证明这种方法进展不大。我认为我的方式可能会正常工作，但只有使用单独的选择器才能起作用。 – VVV

@VVV你在做什么，或者为什么这种方法不适合你？ – Niklas

否您的方法有效。但我认为我的方法也应该起作用，我可能会犯一些简单的错误。但事实证明，我们需要使用新的东西（至少对我来说）来实现这一行为。 – VVV

你需要用在文件准备好语句，点击监听器附加到一个实际的元素：

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

你的选择可能看起来像$("div, p").click(...)取决于哪些元素你想活跃。

来源

2013-11-02 22:26:31 hiattp

真的吗？我需要为每一个单独做？ – VVV

''*“'选择器是通用的。这很慢，不推荐，但我用它来说明这一点。 – hiattp

如果指定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。

如果你只想要点击的元素有它的文字变成红色：

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

JS Fiddle demo。

来源

2013-11-02 22:27:32

感谢大卫，但在你的JS小提琴示例中 - 一次点击都变成红色。 – VVV

查看更新的答案（当前是最后一个代码块和演示）。 –

$(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-02 22:27:40 Paul

在你

$(this).click(function() {

“这”并不是指在<脚本>标签的位置，而是指的是window对象。因此，在本质代码做到这一点：

$(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-02 22:30:01

您必须指定要添加单击事件的元素。例如。这将为所有的DIV元素工作：

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

来源

2013-11-02 22:30:06 Daniel

点击jQuery改变颜色

回答

相关问题