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 分配类，因为它看起来很草率，而且可能很难在以后维护。

在我看来，我想写一个可以跳上一级的脚本，然后抓取上一个兄弟，可能是 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

您可以通过两种方式解决此问题..

一种是在 .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 回答