javascript - 将 jquery 函数绑定(bind)到元素

Question

我是 jquery 的新手，需要一些帮助。我试图在输入文本框时更改 css 元素。我已将一个 css 类应用于我的文本框，并且我的文本框周围有几个 div 标签。

当用户选择文本框时，我想更改所需的 div 标签。

这是 html 的样子

<div class="left">
    <div class="right">
        <input name="myTextBoxID" type="text" id="myTextBoxID" class="myTextBox" />
        <span id="rfInput"></span>
    </div>
</div>

我的 jquery 看起来像这样

<script language="javascript" type="text/javascript">
   $(function () {
       $('.myTextBox').focus(function () {

           $('.box.left').addClass("active");
       }).blur(function () {
           $('.box.left').removeClass("active");
       });
   });
</script>

现在 jquery 正在工作并更改焦点和模糊的类但是它影响所有元素与他 class="myTextBox"我怎样才能让 jquery 附加到所有元素但是只触发 css 更改到元素外部的选定文本框类(class)？

任何帮助都会很棒!

Answer 1

<script language="javascript" type="text/javascript">
   $(function () {
       $('.myTextBox').focus(function () {
           $(this).closest('.left').addClass("active");
       })
       .blur(function () {
           $(this).closest('.left').removeClass("active");
       });
   });


</script>

this 指的是接收事件的元素。

因此，您将 this 包装到一个 jQuery 对象 $(this) 中，并使用您指定的类访问 closest() 祖先。

.closest() - http://api.jquery.com/closest/