当 textarea 聚焦时向元素添加 class

Question

我正在尝试在文本区域处于活动状态时向我的 p 元素添加 class

这就是我到目前为止没有运气的结果。

<textarea class="text"></textarea>
  <p class="someClass">
    <span class="span">
      TEXT
    </span>
  </p>

jQuery

$('textarea').focus(
   $(".someClass").addClass("focused");
});

我试图完成的最终结果是当文本区域获得焦点时

<textarea class="text"></textarea>
  <p class="someClass focused">
    <span class="span">
      TEXT
    </span>
  </p>

这可以通过抢集来完成吗class "someClass"?

Answer 1

您应该为 focus 事件处理程序提供一个匿名函数。试试这个：

$('textarea').focus(function() {
   $(".someClass").addClass("focused");
});

另请注意，您可以单独在 CSS 中执行此操作，而无需任何 JS 代码。使用 CSS 方法还有一个好处，即当 textarea 失去焦点时样式会自动删除。

textarea:focus + p {
    /* styles in here which matched the .focused class */
}

Answer 2

你其实做错了。您应该通过发送匿名函数来执行此操作：

$('textarea').focus(function () {
   $(".someClass").addClass("focused");
});

你错过了。我会说一个更好的方法，如果 .someClass 在相关元素旁边，您可以使用 CSS 的兄弟选择器 +，而不使用 JavaScript:

textarea:focus + p {
  background: #99f;
}

<textarea></textarea>
<p>Click on TextArea</p>

Add class to element when textarea focused