Javascript 如何在这段代码中使用click jquery函数_Javascript_Jquery_Css

Javascript 如何在这段代码中使用click jquery函数

javascript jquery css

Javascript 如何在这段代码中使用click jquery函数,javascript,jquery,css,Javascript,Jquery,Css,当用户单击文本框时，文本框中的字体应该会改变颜色，但由于某些原因它不会改变颜色我有以下代码： <!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.

当用户单击文本框时，文本框中的字体应该会改变颜色，但由于某些原因它不会改变颜色

我有以下代码：

<!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>


$（函数（）{
$（“.textbox0”）。单击（函数（）{
$（this.css（'color'，'rgb（64,0128）'）；
});
});
.textbox0{
位置：固定；
左：131px；
顶部：38px；
字体系列：Arial；
字号：8px；
字体大小：正常；
}
变色

我相信我做的每件事都是正确的，因为这个方法可以处理按钮，但我想我没有。您需要将更改应用到

textarea

元素，而不是

div

：

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

这是一个例子

如果需要将

click

事件处理程序绑定到

.textbox0

元素而不是

textarea

，可以使用事件处理程序中的（或）方法将更改应用到

textarea

：

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

您需要将更改应用于

textarea

元素，而不是

div

：

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

这是一个例子

如果需要将

click

事件处理程序绑定到

.textbox0

元素而不是

textarea

，可以使用事件处理程序中的（或）方法将更改应用到

textarea

：

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

您应该在访问者中添加“textarea”标记

我把代码放在这里：

您应该在访问者中添加“textarea”标记

我把代码放在这里：

样式表中的更改是在

div

上进行的，而不是在div内的

textarea

上

您可以通过以下几种方式进行更改：将该类放在

textarea

或者将jQuery选择器更改为

.textbox0 textarea

或者在单击事件中更改代码以更改div中textarea的css。

样式表中的更改是在

div

上完成的，而不是在div中的

textarea

上完成的

您可以通过以下几种方式进行更改：将该类放在

textarea

或者将jQuery选择器更改为

.textbox0 textarea

或者在单击事件中更改代码以更改div中文本区域的css。

这不是因为您的

单击需要在文本区域上绑定。
也不是因为您需要使用命名的CSS颜色
它也与onDomReady事件无关
使代码正常工作所需的只是一行简单的CSS：
textarea { color: inherit; }

textarea中的文本没有改变颜色的原因是大多数浏览器的用户样式的级联优先级高于inherit
。这很好，否则你会看到一些非常奇怪的文本区域漂浮在周围
 这不是因为您的点击
绑定需要在文本区域。
也不是因为您需要使用命名的CSS颜色
它也与onDomReady事件无关
使代码正常工作所需的只是一行简单的CSS：
textarea { color: inherit; }

textarea中的文本没有改变颜色的原因是大多数浏览器的用户样式的级联优先级高于inherit
。这很好，否则你会看到一些非常奇怪的文本区域漂浮在周围
 如果你能解释为什么会这样，那就太好了，但我有一种预感，你自己也不太确定。我确实知道为什么会这样（既然你在回答中这样做了，我现在解释它就没有什么意义了）。为什么你有预感我不会知道？此外，由于OP希望更改文本区域的颜色，如果div
中有更多文本，您的方法会发生什么情况？将更改应用于div
将导致对该文本进行不必要的更改，尽管这也会影响textarea
。您正在假设A）div
的作用不是操纵textarea
的位置，B）将来会向其添加额外的文本，和C）将颜色应用于文本区域是无意的。教一个人钓鱼……你却做出了相反的假设！我们的两种方法各有优缺点。这两个答案都是正确的，我没有做任何假设。阅读问题中的第一句话，其中期望和问题清楚地表达出来。我指出了问题所在。为了更好的指导而做出假设并没有什么内在的错误，我只是觉得实际指导比分享“修正”的版本并让提问者对问题一无所知更有意义。如果你能解释为什么会这样，那就太好了，但我有一种预感，你自己也不太确定。我确实知道为什么会这样（既然你在回答中这样做了，我现在解释它就没有什么意义了）。为什么你有我不知道的预感？另外，由于OP希望更改文本区域的颜色，如果div
中有更多文本，你的方法会发生什么？将更改应用到div
会对该文本造成不必要的更改，尽管这会影响textarea
也是。假设A）div
的作用不是操纵textarea
的位置，B）将来会向其添加额外的文本，C）将颜色应用到textarea
是无意的。教一个人钓鱼……你却做出了相反的假设！我们的两种方法各有优缺点。这两个答案都是正确的，我没有做任何假设。阅读问题中的第一句话，其中期望和问题清楚地表达出来。我指出了问题所在。没有任何内在的东西