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 デモ

onfocusこれにより、とに同じハンドラが割り当てられ、onblurのクラスがトグルされるだけです.formhead。

于 2011-05-30T12:08:34.450 に答える
1

また、 closest()を使用して親<div>要素をクラスと一致させ、次にprevAll()を使用してその兄弟に進むこともできます。fieldleftformhead

$(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 に答える