使用 Jquery 动态更改标签“for”属性

Question

我正在尝试将'for' 属性分配给每个标签标记，而不是手动键入它。另外，我还想让每个'for'等于它对应的输入'name'

如何使用 Jquery 编写代码来动态更改每个代码？

下面是我的html。

我试过这样做：

$("input, select").each(function(){
  $(this).siblings().attr('for', [input=name].val)

});

但这不起作用。有任何想法吗？

$("input, select").each(function(){
  $(this).siblings().attr('for', [input=name].val)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="billingArea"> 
  <p>
      <label>First Name:</label>
     <input name="billingFirstName" type="text" value="" required />
  </p>
  <p>
      <label>Last Name:</label> 
    <input name="billingLastName" type="text" value="" required />
  </p>
  <p>
      <label>Street Address:</label> 
    <input name="billingAddress1" type="text" value="" required />
  </p>
  <p>
 <label> Street Address 2: </label>
    <input name="billingAddress2" type="text" value="" />
  </p>
  <p>
    <label> City: </label>
    <input name="billingCity" type="text" value="" required />
  </p>
  <p>
    State/Province: <select name="billingState" required />
      <option value="">--</option>
      <option value="Alberta, Canada">AB</option>
      <option value="Alaska, USA">AK</option>    
    </select>
  </p>
  <p>
      <label>Postal Code:</label> <input name="billingZip" type="text" value="" required />
  </p>
</div>

Answer 1

我建议您稍微更改一下标记，让您的输入嵌套在标签标签内。这样你就不需要for 属性了。

如果你需要保留这个标记，试试这个：

var fieldName = $(this).attr('name'); $(this).siblings().attr('for', fieldName);

$("input, select").each(function(){
  var fieldName = $(this).attr('name');
  $(this).siblings().attr('for', fieldName);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="billingArea"> 
  <p>
      <label>First Name:</label>
     <input name="billingFirstName" type="text" value="" required />
  </p>
  <p>
      <label>Last Name:</label> 
    <input name="billingLastName" type="text" value="" required />
  </p>
  <p>
      <label>Street Address:</label> 
    <input name="billingAddress1" type="text" value="" required />
  </p>
  <p>
 <label> Street Address 2: </label>
    <input name="billingAddress2" type="text" value="" />
  </p>
  <p>
    <label> City: </label>
    <input name="billingCity" type="text" value="" required />
  </p>
  <p>
    State/Province: <select name="billingState" required />
      <option value="">--</option>
      <option value="Alberta, Canada">AB</option>
      <option value="Alaska, USA">AK</option>    
    </select>
  </p>
  <p>
      <label>Postal Code:</label> <input name="billingZip" type="text" value="" required />
  </p>
</div>

Answer 2

您没有向表单控件添加任何#id，所以我将它们添加到 [name] 属性的相同值。由于习惯，我没有使用 jQuery 方法获取和设置属性，而是使用纯 JavaScript。与.set/getAttribute() 相比，使用.attr() 并没有真正的优势，反之亦然。如果你仍然想要一个 jQuery 版本，在 Demo 中有相应的 jQuery 注释。如果您不舒服dereferencing jQuery Objects，请不要混淆它们，使用其中一个。

注意：此特别声明：

var field = $(this)[0].nextElementSibling;

零索引的括号表示法 ([0]) 将 jQuery 对象 ($("selector")) 解引用为纯 JavaScript 对象 (selector) 。取消引用 jQuery 对象的原因通常是可以使用普通的 JavaScript 属性或方法。 jQuery 方法无法识别纯 JavaScript 对象，而纯 JavaScript 方法也无法识别 jQuery 对象。

演示

详细信息在演示中注释

/* each() <label>...
|| Get <label>'s sibling element that folloows it.
|| Get that sibling's #id
|| Set the <label>'s [for] attribute value to the sibling's #id
*/
$('label').each(function(i, L) {

  //var field = $(this).next();
  var field = $(this)[0].nextElementSibling;

  //var ID = field.attr('id');
  var ID = field.id;

  //$(this).attr('for', ID);
  this.setAttribute('for', ID);
});

label,
select,
innput {
  font: inherit;
  display: inline-block;
}

label {
  width: 15ch
}

input[type=text] {
  width: 45ch
}

input[type=number] {
  width: 12ch;
  text-align: right
}

<form id="billingArea">
  <fieldset>
    <label>First Name:</label>
    <input id="billingFirstName" name="billingFirstName" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label>Last Name:</label>
    <input id="billingLastName" name="billingLastName" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label>Street Address:</label>
    <input id="billingAddress1" name="billingAddress1" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label> Street Address 2: </label>
    <input id="billingAddress2" name="billingAddress2" type="text" value="" />
  </fieldset>
  <fieldset>
    <label> City: </label>
    <input id="billingCity" name="billingCity" type="text" value="" required />
  </fieldset>
  <fieldset>
    <label>State/Province: </label><select id="billingState" name="billingState" required>
      <option value="">--</option>
      <option value="Alberta, Canada">AB</option>
      <option value="Alaska, USA">AK</option>    
    </select>
  </fieldset>
  <fieldset>
    <label>Postal Code:</label> <input id="billingZip" name="billingZip" type="number" value="" required min='10000' max='99999' />
  </fieldset>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>