如何在此代码中使用点击jquery功能

问题描述：

当用户单击文本框时，文本框中的字体应该改变颜色，但由于某种原因它不会。如何在此代码中使用点击jquery功能

我有以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $(".textbox0").click(function() { 
     $(this).css('color', 'rgb(64, 0, 128)'); 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
    .textbox0 { 
     position: fixed; 
     left: 131px; 
     top: 38px; 
     font-family: Arial; 
     font-size: 8px; 
     font-weight: normal; 
    } 
    </style> 
</head> 

<body> 
    <div class="textbox0"><textarea rows=7 cols=30>Change colour</textarea></div> 
</body> 
</html>

我相信我做了正确的一切将此方法与按钮的工作，但我想我没有。

答

您需要更改应用到textarea元素，而不是div：

$(".textbox0 textarea").click(function() { 
    $(this).css('color', 'rgb(64, 0, 128)'); 
});

这里有一个working example。

如果你需要保持绑定到.textbox0元素，而不是textarea的click事件处理程序，您可以使用事件处理程序中的find（或children）方法将更改应用于该textarea：

$(".textbox0").click(function() { 
    $(this).find("textarea").css("color", "rgb(64, 0, 128)"); 
});

如果你能解释*为什么会这样，但是我有一种预感，你并不确定你自己。 – coreyward 2012-01-15 00:24:09

我知道这是为什么（现在我的解释中没有什么重要的，因为你已经在你的答案中这样做了）。为什么你有一种我不知道的直觉？另外，由于OP想要改变'textarea'的颜色，如果在某个点上'div'中有更多文本，你的方法会发生什么？将变化应用于'div'会导致对该文本进行不必要的更改，但它也会影响'textarea'。 – 2012-01-15 00:28:58

你正在做假设A）'div'服务的目的不是操纵'textarea'的位置，B）将来会添加其他文本，以及C）将颜色应用到'textarea'是无意的。教一个人去钓鱼... – coreyward 2012-01-15 00:31:00

答

您应该在您的存取器中添加“textarea”标签。

我把这里的代码：http://jsfiddle.net/qfvVv/

答

在样式表的变化正在对div进行，而不是在分区内textarea。

您可以通过多种方式更改此设置：把类的textarea 或您的jQuery选择更改为.textbox0 textarea 或更改单击事件的代码来改变textarea的CSS在div。

答

这是不是因为你的click结合需要在textarea的。

也不是因为您需要使用指定的CSS颜色。

也与onDomReady事件有关。

所有你需要让你的代码工作是CSS的简单的一行：

textarea { color: inherit; }

在您的textarea文本不变色的原因是用户的样式大部分浏览器都高级联优先于inherit。这很好，否则你会看到一些非常怪异的textareas浮动。 ;）

如何在此代码中使用点击jquery功能

相关推荐