Question

我想要实现的是当用户专注于文本框时，其中的字段集将添加一个类“active_fieldset”，因此它提供了一个很好的视觉提示，表明用户在表单中的位置。使用以下javascript，它确实会影响父字段集，但它也会影响所有兄弟字段集。难道我做错了什么？我的HTML或javascript是否存在根本性的错误？

示例HTML：

<div id="content">

 <form action="next_page" method="post">

  <fieldset>
   <legend>Foo</legend>

   <p><label for="one">One</label> <input type="text" class="input_text" name="one" value="" id="one"></p>
  </fieldset>

  <fieldset>
   <legend>Bar</legend>

   <p><label for="two">Two:</label><input type="text" class="input_text" name="two" value="" id="two"></p>

  </fieldset>

  <p><input type="submit" value="Continue &rarr;"></p>
 </form>

</div>

form.js：

$(document).ready(function(){
 $('.input_text').focus(function(){
  $(this).parents('fieldset').addClass("active_fieldset");
 });
});

编辑：

我已经加入了我的CSS：

fieldset
{
    border-width: 10px 0 0 0;
    border-style: solid;
    border-color: #0D6EB8;
}

fieldset.active_fieldset
{
    border-width: 10px 0 0 0;
    border-style: solid;
    border-color: #0D6EB8;
}

Answer 1

尝试使用closest方法。您可能需要将其与更多代码配对，以确保已从所有其他字段集中删除该类。

$('.input_text').focus( function() {
    $('fieldset').removeClass('active_fieldset');
    $(this).closest('fieldset').addClass('active_fieldset');
});

引用文档：

最近看的作品当前元素，看它是否匹配指定的表达式，如果是这样的话只返回元素本身。如果它不匹配然后它将继续遍历文档，父母由 parent，直到找到一个元素匹配指定的表达式。如果找不到匹配的元素，然后没有将被退回。

Answer 2

我建议：

$("input.input_text").focus(function() {
  $("fieldset.active_fieldset").removeClass("active_fieldset");
  $(this).parents("fieldset").addClass("active_fieldset");
}).blur(function() {
  $("fieldset.active_fieldset").removeClass("active_fieldset");
});

Answer 3

将parents()与参数一起使用。

$（ “＃测试”）的父母。（ '某物。'）; //会给你一个有类的东西。

Answer 4

也许这是一个有bug的CSS代码。我认为使用JQuery.closest的建议是正确的。

jquery.parents（）正在选择祖父母的祖父母和兄弟姐妹

4 个答案: