Question

在下面的代码中，我试图使它在选择（聚焦）输入时，相关字段集中的“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>

Answer 1

您可以使用以下行获取输入.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 Demo

这将为onfocus和onblur分配相同的处理程序，它只会切换.formhead的类。

Answer 2

您还可以使用closest()将父<div>元素与类fieldleft匹配，然后使用prevAll()继续使用formhead兄弟：

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

Answer 3

您可以使用.next()

使用jQuery将类添加到焦点组特定div

3 个答案: