Question

我有以下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（）的某种组合，但是我无法得到对的。有什么建议？

Answer 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');
});

Answer 2

你可以通过两种方式解决这个问题。

一个是在.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');
    });

当前div中的输入具有焦点时，jQuery选择器用于获取前一个div

2 个答案: