Fieldset的动态命名

我想要获得一个表单来动态地添加更多的输入字段与ID也是动态生成的。我的大部分工作，除了fieldset id是接收最后一个输入字段的名称，而不是原始字段集（如果您检查字段集的id，它将显示“fenceType2”而不是“fenceDescription2”）。如果任何人都可以解释我要去哪里，那将非常感谢！非常感谢！下面是代码的小提琴 - http://jsfiddle.net/gv0029/dyJjA/ - 这里是代码： HTML：Fieldset的动态命名

<div id="inputFence1" class="clonedInputFence"> 
    <fieldset id="fenceDescripton"> 
     <legend><strong>Fence Description</strong> 

     </legend>Fence Description: 
     <select name="fenceHeight" id="fenceHeight"> 
      <option value="select">Select Fence Height</option> 
      <option value="6" id="fH6">6 Ft.</option> 
     </select> 
     <select name="fenceType" id="fenceType"> 
      <option value="select">Select Fence Type</option> 
      <option value="wr1" id="wr1">WRC#1</option> 
     </select> 
    </fieldset> 
</div> 
<input type="button" id="btnAddFence" value="Add Another Fence" /> 
<input type="button" id="btnDelFence" value="Remove Fence" />

JS：

//Dynamic Fence Input Fields 
$('#btnAddFence').click(function() { 
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have 
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added 

    // create the new element via clone(), and manipulate it's ID using newNum value 
    var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum); 

    //Fence Description 
    newElem.children($("select[name=fenceHeight] option:selected")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum); 
    newElem.children($("select[name=fenceType] option:selected")).attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum); 
    $('#inputFence' + num).after(newElem); 

    // enable the "remove" button 
    //$('#btnDel').attr('disabled',''); 
    $('#btnDelFence').removeAttr('disabled'); 

    // business rule: you can only add 5 names 
    //if (newNum == 5) 
    //$('#btnAdd').attr('disabled','disabled'); 
}); 

$('#btnDelFence').click(function() { 
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have 
    $('#inputFence' + num).remove(); // remove the last element 

    // enable the "add" button 
    //$('#btnAdd').attr('disabled',''); 
    $('#btnAddFence').removeAttr('disabled'); 

    // if only one element remains, disable the "remove" button 
    if (num - 1 == 1) $('#btnDelFence').attr('disabled', 'disabled'); 
}); 

$('#btnDelFence').attr('disabled', 'disabled');

任何和所有帮助表示赞赏！再次感谢！

来源

2014-01-11 mario

从.children()

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

因为你给的$(...)而不只是一个选择的字符串，children似乎选择克隆DIV，这是直接孩子fieldset。

所以，你应该做两个修改

使用.find()代替children
使用选择串

newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum); 
newElem.find("select[name=fenceType]").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);

了解改JSFiddle

来源

2014-01-11 01:47:12

嘿，Olaf，我尝试了我的项目上的代码，但调试器说“错误：权限拒绝访问属性toString'”任何想法这意味着什么？ – mario

Nvm，我知道它的工作。谢谢！ – mario

喜欢这个DEMO

//Fence Description 
    newElem.children('fieldset').attr('id', 'fenceDescripton'+newNum); 
    newElem.children("select[name=fenceHeight] option:selected").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum); 
    newElem.children("select[name=fenceType] option:selected").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum); 
    $('#inputFence' + num).after(newElem);

来源

2014-01-11 01:31:18

嘿亚历克斯，我检查了演示和字段集编号，但现在实际领域没有一个数字。任何想法发生了什么？ – mario

嘿，我真的想出了如何解决这个问题。首先我删除代码的不同部分之间的单独的ID，以使其更易于管理，然后我改变我试图创建为newElements方式：

newElem.children($("select[name=fenceHeight] option:selected")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);

到：

newElem.find(':input[name="railQuantity"]').attr('id', 'railQuantity' + newNum).attr('name', 'railQuantity' + newNum);

主要问题显然是我的选择。感谢你们的帮助！非常感谢！

来源

2014-01-20 21:07:57 mario

Fieldset的动态命名

回答

相关问题