添加类以将特定div集中到jQuery上

问题描述

|| 在下面的代码中，我尝试使其成为选中（集中）输入时，相关字段集中的\'formhead \'div更改其背景颜色，并在模糊时更改它的背景颜色。我想通过在焦点上向同一div添加一个类并在模糊时删除该类来做到这一点。 jQuery最接近的概念在概念上与我要尝试的最相似，但是不合适，因为它仅针对父div。还有其他东西可以针对与该类最近的div而不影响其他字段集中的其他类吗？还是我必须更具体一些并标明封头等？

<fieldset>
<div class=\"formhead\">Heading Title 1</div>
<div class=\"fieldleft\">
    <label for=\"specificinput\">Input Title</label>
    <input type=\"text\" class=\"forminput\" id=\"specificinput\">
</div>
<div class=\"fieldleft\">
    <label for=\"specificinput\">Input Title</label>
    <input type=\"text\" class=\"forminput\" id=\"specificinput\">
</div>
</div>
</fieldset>

<fieldset>
<div class=\"formhead\">Heading Title 2</div>
<div class=\"fieldleft\">
    <label for=\"specificinput\">Input Title</label>
    <input type=\"text\" class=\"forminput\" id=\"specificinput\">
</div>
<div class=\"fieldleft\">
    <label for=\"specificinput\">Input Title</label>
    <input type=\"text\" class=\"forminput\" id=\"specificinput\">
</div>
</div>
</fieldset>

和jQuery：

<script type=\"text/javascript\"> 
$(document).ready(function() {
    $(\'input\').focus(function( ){
    $(this).closest(\'.formhead\').addClass(\'bluebg\');
  });
    $(\'input\').focus(function( ){
    $(this).closest(\'.formhead\').removeClass(\'bluebg\');
  });
});
</script> 

    

解决方法

        您可以通过以下行获得输入的

.formhead

：

$(this).closest(\'fieldset\').find(\'.formhead\').addClass(\'bluebg\');

您也可以这样写（实际上与上下文相同）：

$(\'.formhead\',$(this).closest(\'fieldset\')).addClass(\'bluebg\');

我发现您的代码最简单的方法是：

$(\'input.forminput\').bind(\'focus blur\',function () {
    $(this).closest(\'fieldset\').find(\'.formhead\').toggleClass(\'bluebg\');
});

jsFiddle演示 这将为

onfocus

和

onblur

分配相同的处理程序，这将仅切换

.formhead

的类。

.bind()

的多个活动

.toggleClass()

    ,        您还可以使用closest（）将父项

<div>

元素与类

fieldleft

匹配，然后使用prevAll（）进行其

formhead

同级：

$(document).ready(function() {
    $(\"input:text\").bind(\"focus blur\",function() {
        $(this).closest(\".fieldleft\").prevAll(\".formhead\").toggleClass(\"bluebg\");
    });
});

    ,        您可以使用.next（）