Question

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

我有以下代码：

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

我相信我做的一切都正确，因为这种方法适用于按钮，但我想我没有。

Answer 1

这不是因为 click 绑定需要在textarea上。

也不是因为您需要使用命名的CSS颜色。

它也与onDomReady事件无关。

使代码工作所需的只是一个简单的CSS：

textarea { color: inherit; }

textarea中的文本没有改变颜色的原因是大多数浏览器的用户样式的级联优先级高于inherit。这很好，否则你会看到漂浮在周围的一些非常奇怪的textareas。 ;）

Answer 2

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

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

这是working example。

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

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

Answer 3

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

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

Answer 4

样式表中的更改正在div上进行，而不是在div内的textarea上进行。

您可以通过多种方式进行更改：把课程放在textarea上或者将您的jQuery选择器更改为.textbox0 textarea 或者更改click事件中的代码以更改div中textarea的css。

如何使用此代码单击jquery函数

4 个答案: