3

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

3 回答 3

5

您可以.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 演示

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

于 2011-05-30T12:08:34.450 回答
1

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

$(document).ready(function() {
    $("input:text").bind("focus blur", function() {
        $(this).closest(".fieldleft").prevAll(".formhead").toggleClass("bluebg");
    });
});
于 2011-05-30T12:10:05.163 回答
-1

你可以使用.next()

于 2011-05-30T12:09:39.443 回答