Question

我正在尝试创建最有效的功能，在单击旁边的标签时聚焦文本框。我有一个工作函数，但它充满了一堆if语句。这种形式有16个文本框，所以我不希望每次单击标签时该函数都要经过16个if语句。这是我的工作代码：

HTML

        <div>
          <div>
            <span class="form-label">Contact Name</span>
          </div>
          <div>
            <input type="text" name="name" id="signup_name">
          </div>
        </div>

        <div>
          <div>
            <span class="form-label">Email Address</span>
          </div>
          <div>
            <input type="email" name="email" id="signup_email">
          </div>
        </div>

的jQuery

$('.signup_container .form-label').click(function() {
    labelName = $(this).html()
    if (labelName.indexOf("Contact Name") >= 0) {
        $('#signup_name').focus();
    }
    if (labelName.indexOf("Email Address") >= 0) {
        $('#signup_email').focus();
    }
});

现在我想创建更小的东西，例如：

jQuery的：

$('.signup_container .form-label').click(function() {
    $(this).closest('input[type=text]').focus();
});

但是我无法正常执行此功能。是否有可能使用最近并且像这样聚焦？

Answer 1

最接近的方法返回与选择器匹配的元素中最接近的父。

以下是官方文档：http://api.jquery.com/closest/

解决方案

其他一些解决方案是使用两次父选择器，然后使用查找一次。当然我假设你的html不会改变。

$('.signup_container .form-label').click(function() {
    $(this).parent().parent().find('input[type=text]').focus();
});

更好的解决方案

如果可以的话，做这样的事情会更好。

<div class='inputGroup'>
 <div>
    <span class="form-label">Contact Name</span>
  </div>
  <div>
    <input type="text" name="name" id="signup_name">
  </div>
</div>

<div class='inputGroup'>
  <div>
    <span class="form-label">Email Address</span>
  </div>
  <div>
    <input type="email" name="email" id="signup_email">
  </div>
</div>

然后使用最近的方法找到最接近的.inputGroup父

$('.signup_container .form-label').click(function() {
    $(this).closest('.inputGroup').find('input[type=text]').focus();
});

使用最接近焦点最近的文本框

1 个答案:

解决方案

更好的解决方案