0

私は次のhtml構造を持っています

<div id="container">
  <div class="label">
    @Html.LabelFor(m => m.SomeProperty) 
  </div>
  <div class="input">
    @Html.EditorFor(m => m.SomeProperty) 
  </div>
<!--on and on-->
</div>

対応するdivの入力にフォーカスがある場合、ラベルdivに背景色を設定します。

つまり、ユーザーがSomePropertyのテキストボックスをクリック（またはタブで移動）したときに、ラベルdivにcssクラスを追加して、SomePropertyのラベルを強調表示したいと思います。

ラベルdivにclass="SomeProperty"を設定してから、jQueryを使用して次のようなcssを追加できることはわかっています。

$('#container input').focus(function () {
  var thisId = $(this).attr('id');
  $('.' + thisId).addClass('highlight');
  //...
});

しかし、もっと良い方法があるかどうか疑問に思っています。ずさんで、将来的に維持するのが難しいように見えるので、すべてのラベルdivにクラスを割り当てたくありません。

私の見方では、1レベル上にジャンプして、前の兄弟、おそらくparent（）とprev（）の組み合わせを取得できるスクリプトを作成したいのですが、正しく理解できませんでした。助言がありますか？

4

2 に答える 2

1

.label要素が常に要素の前にある場合は、次のことをお勧めし.inputます。

$('#container input').focus(function(){
    $(this).closest('div').prev('div.label').addClass('highlight');
});

または、より柔軟なDOMに依存しないアプローチを可能にするには：

$('#container input').focus(function(){
    $('div.label[for="' + this.id + '"]').addClass('highlight');
});
于 2012-11-02T17:47:10.340 に答える
0

これには2つの方法でアプローチできます。

1つは、.closest（）で.find（）を使用することです。

またはこれ

.prev（）の使用

$('#container input').focus(function(){
    $(this).closest('.input').prev('.label').addClass('highlight');
});

.prevAll（）を使用する

   $('#container input').focus(function(){
        $(this).closest('.input').prevAll('.label').first().addClass('highlight');
    });
于 2012-11-02T17:47:49.750 に答える