使用jQuery动态更改标签的"for"属性 [英] dynamically change label 'for' attribute in with Jquery

问题描述

我试图将'for'属性分配给每个标签标签，而不是手动输入标签.另外，我还想使每个'for'等于它对应的输入'name'

I'm trying to assign the 'for' attribute to each label tag instead of manually typing it. In addition, I also want to make each 'for' equal it's corresponding input 'name'

一旦动态更改每个代码，我该如何使用Jquery编写代码?

How can I use Jquery to write code once that dynamically changes each one?

以下是我的html.

我尝试这样做:

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

});

但这不起作用.有任何想法吗?

but that doesn't work. Any Ideas?

$("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>

推荐答案

我建议您稍微改变一下标记，以使输入内容嵌套在label标记内.这样，您就不需要 for 属性.

I advise you to change a bit the markup to have your inputs nested inside the label tag. This way you don't need the for attribute.

尽管如果您需要保留此标记，请尝试以下操作:

Although if you need to keep this markup, try this :

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>

这篇关于使用jQuery动态更改标签的"for"属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！