如何将click jquery函数与此代码一起使用

How to use the click jquery function with this code

本文关键字：代码 一起 函数 click jquery      更新时间：2023-09-26

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

我有以下代码：

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

我相信我做的每件事都是正确的，因为这种方法对按钮有效，但我想我没有。

这不是因为click绑定需要在文本区域上

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

它也与onDomReady事件无关。

你只需要一行简单的CSS:就可以让你的代码正常工作

textarea { color: inherit; }

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

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

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

下面是一个工作示例。

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

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

您应该在访问器中添加"textarea"标记。

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

样式表中的更改是在div上完成的，而不是在div中的textarea上。

您可以通过以下几种方式对此进行更改：将类放在textarea上或者将jQuery选择器更改为.textbox0 textarea或者更改click事件中的代码以更改div中文本区域的css。

相关文章：