Question

我尝试将'for'属性分配给每个标签代码，而不是手动输入。此外，我还想让每个'for'等于它的相应输入'name'

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

下面是我的HTML。

我试过这样做：

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

});

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我建议你改变一下标记，使你的输入嵌套在label标签内。这样您就不需要Setup()属性。

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

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

Answer 2

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

注意：此特定声明：

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

零索引（[0]）的括号表示法将jQuery对象（$("selector")）解引用为纯JavaScript对象（ selector）即可。解除引用jQuery对象的原因通常是可以使用普通的JavaScript属性或方法。 jQuery方法不能识别纯JavaScript对象，也适用于jQuery对象的纯JavaScript方法。

演示

详细信息在演示中进行了评论

＆＃13;

/* 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);
});

＆＃13;

label,
select,
innput {
  font: inherit;
  display: inline-block;
}

label {
  width: 15ch
}

input[type=text] {
  width: 45ch
}

input[type=number] {
  width: 12ch;
  text-align: right
}

＆＃13;

<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>

＆＃13;

动态更改标签＆＃39; for＆＃39;使用Jquery进行属性

2 个答案:

演示