Javascript 附加字段包含唯一的类

我有一个相当复杂的表格，为了演示，我简化了它

我想能够添加一个“项目”通过一个按钮的形式。这部分并不难。然后，我试图通过下拉菜单修改每个独立项。但是，当前更改选项的方法是通过每个选项指定的类。当两个类相似时，都将通过一个下拉菜单进行调整

生成新字段时，是否有方法分配唯一类

谢谢大家!

<script src="jQuery/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
function changeMenu(value){
    $(document).ready(function() {
        $(".change").css("display","none");
        if(value=="hardware"){
            $(".hardware").show();
            };
        if(value=="production"){
            $(".production").show();
            };
        if(value=="design"){
            $(".design").show();
            };
    });
};

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper             = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="input_fields_wrap"> <label for="item_type">Item Type: </label><br /> <select id="change[]" onchange="changeMenu(this.value)"> <option value="">Select</option> <option value="production">Production</option> <option value="design">Design</option> <option value="hardware">Harware Only</option> <option value="outsource">Outsourced</option> <option value="install">Installation</option> </select> <div class="change production" style="display:none"> <label for="item_size">Size: </label><br /> <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" /> </div> <div class="change design" style="display:none"> <label for="item_size">Dize: </label><br /> <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" /> </div> </div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});



</script>
<link href="/style.css" rel="stylesheet" type="text/css" />
<div class="input_fields_wrap">

        <label for="item_type">Item Type: </label><br />
        <select id="change[]" onchange="changeMenu(this.value)">
            <option value="">Select</option>
            <option value="production">Production</option>
            <option value="design">Design</option>
            <option value="hardware">Harware Only</option>
            <option value="outsource">Outsourced</option>
            <option value="install">Installation</option>
        </select>


    <div class="change production" style="display:none">
        <label for="item_size">Size: </label><br />
        <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" />
    </div>

    <div class="change design" style="display:none">
        <label for="item_size">Dize: </label><br />
        <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" />
    </div>
</div>
<button class="add_field_button">Add More Fields</button>

功能更改菜单（值）{
$（文档）.ready（函数（）{
$（“.change”）.css（“显示”、“无”）；
如果（值=“硬件”）{
$（“.hardware”）.show（）；
};
如果（值=“生产”）{
$（“.production”）.show（）；
};
如果（值=“设计”）{
$（“.design”）.show（）；
};
});
};
$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x选择仅生产设计硬件外包安装尺寸：
Dize:
'）；//添加输入框
}
});
$（包装器）。在（“单击“，”.remove_字段）上，函数（e）{//用户单击remove text
e、 preventDefault（）；$（this）.parent（'div'）.remove（）；x--；
})
});
项目类型：

选择
生产
设计
仅硬件
外包
安装
大小：

Dize:

添加更多字段

我已经清理了一下你的代码，我想它现在可以工作了。我已删除

功能更改菜单

HTML:

<div id="input_fields_wrap">
  <div class="input_fields_wrap">

          <label for="item_type">Item Type: </label><br />
          <select id="change[]">
              <option value="">Select</option>
              <option value="production">Production</option>
              <option value="design">Design</option>
              <option value="hardware">Harware Only</option>
              <option value="outsource">Outsourced</option>
              <option value="install">Installation</option>
          </select>


      <div class="change production" style="display:none">
          <label for="item_size">Size: </label><br />
          <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" />
      </div>

      <div class="change design" style="display:none">
          <label for="item_size">Dize: </label><br />
          <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" />
      </div>
  </div>
</div>
<button class="add_field_button">Add More Fields</button>

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper             = $("#input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count

  $('#input_fields_wrap').on("change","select", function(e){ 
    $(".change").css("display","none");
    var fieldWrap = $(this).closest('.input_fields_wrap');
    fieldWrap.find("." + $(this).val()).show();
  });

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="input_fields_wrap"> <label for="item_type">Item Type: </label><br /> <select id="change[]"> <option value="">Select</option> <option value="production">Production</option> <option value="design">Design</option> <option value="hardware">Harware Only</option> <option value="outsource">Outsourced</option> <option value="install">Installation</option> </select> <div class="change production" style="display:none"> <label for="item_size">Size: </label><br /> <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" /> </div> <div class="change design" style="display:none"> <label for="item_size">Dize: </label><br /> <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" /> </div> </div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

项目类型：

选择
生产
设计
仅硬件
外包
安装
大小：

Dize:

添加更多字段

Javascript:

<div id="input_fields_wrap">
  <div class="input_fields_wrap">

          <label for="item_type">Item Type: </label><br />
          <select id="change[]">
              <option value="">Select</option>
              <option value="production">Production</option>
              <option value="design">Design</option>
              <option value="hardware">Harware Only</option>
              <option value="outsource">Outsourced</option>
              <option value="install">Installation</option>
          </select>


      <div class="change production" style="display:none">
          <label for="item_size">Size: </label><br />
          <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" />
      </div>

      <div class="change design" style="display:none">
          <label for="item_size">Dize: </label><br />
          <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" />
      </div>
  </div>
</div>
<button class="add_field_button">Add More Fields</button>

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper             = $("#input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count

  $('#input_fields_wrap').on("change","select", function(e){ 
    $(".change").css("display","none");
    var fieldWrap = $(this).closest('.input_fields_wrap');
    fieldWrap.find("." + $(this).val()).show();
  });

    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="input_fields_wrap"> <label for="item_type">Item Type: </label><br /> <select id="change[]"> <option value="">Select</option> <option value="production">Production</option> <option value="design">Design</option> <option value="hardware">Harware Only</option> <option value="outsource">Outsourced</option> <option value="install">Installation</option> </select> <div class="change production" style="display:none"> <label for="item_size">Size: </label><br /> <input type="number" name="production_width[]" id="item_width" autocomplete="off" style="width: 50px" value="0" /> </div> <div class="change design" style="display:none"> <label for="item_size">Dize: </label><br /> <input type="number" name="design_width[]" id="item_width" autocomplete="off" style="width: 60px" value="0" /> </div> </div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“#输入_字段_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（“#输入_字段_包装”）。在（“更改”、“选择”，函数（e）{
$（“.change”）.css（“显示”、“无”）；
var fieldWrap=$（this）.closest（'.input_fields_wrap'）；
fieldWrap.find（“.”+$（this.val（））.show（）；
});
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x选择仅生产设计硬件外包安装尺寸：
Dize:
'）；//添加输入框
}
});
$（包装器）。在（“单击“，”.remove_字段）上，函数（e）{//用户单击remove text
e、 preventDefault（）；$（this）.parent（'div'）.remove（）；x--；
})
});

演示：

我觉得你处理这个问题的方法不对。所以我改变了很多。我已经创建了该字段的模板：

<div class="input_fields_wrap" style="display:none;" id="field_template">

    <label>Item Type: </label><br />
    <select class="select-change">
        <option value="">Select</option>
        <option value="production">Production</option>
        <option value="design">Design</option>
        <option value="hardware">Harware Only</option>
        <option value="outsource">Outsourced</option>
        <option value="install">Installation</option>
    </select>

    <div class="change production" style="display:none">
        <label>Size: </label><br />
        <input type="number" name="production_width[]" autocomplete="off" style="width: 50px" value="0" />
    </div>

    <div class="change design" style="display:none">
        <label>Dize: </label><br />
        <input type="number" name="design_width[]" autocomplete="off" style="width: 60px" value="0" />
    </div>
        <button class="remove_field">x</button>
</div>

项目类型：

选择
生产
设计
仅硬件
外包
安装
大小：

Dize:

x

它应该在表单之外

我为字段添加了一个占位符：

<div id="fields">      
</div>

它应该在表单中

$(function() {
    function changeMenu(el){
        $(el).closest('.input_fields_wrap').find(".change").css("display","none");
        $(el).closest('.input_fields_wrap').find("." + el.value).show();
    };

    var max_fields      = 10; //maximum input boxes allowed
    var template             = $("#field_template");
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    addField();
    add_button.click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            addField();
        }
    });

    function addField() {
        var clone = $('#field_template').clone();
        $('#fields').append(clone.removeAttr('id').show());
    }

    $('#fields').on('change', '.select-change',function(){changeMenu(this);})

    $('#fields').on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); 
        if(x >1){
         $(this).parent('div').remove(); x--;
        }
    })
});

$（函数（）{
功能更改菜单（el）{
$（el）.最近（'.input_fields_wrap'）.find（“.change”）.css（“display”，“none”）；
$（el）.closest（'.input_fields_wrap'）.find（“.”+el.value.show（）；
};
var max_fields=10；//允许的最大输入框数
var模板=$（“字段模板”）；
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
addField（）；
添加按钮。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x1）{
$（this.parent（'div'）.remove（）；x--；
}
})
});

---

代码克隆模板并放入占位符

您介意制作一个JSFIDLE以便我可以看到代码的运行吗？（希望能更好地理解你想要什么）我正在努力。由于某些原因，它的工作原理与我的服务器上的不同。请耐心听我说几句……您的

包装器

，

添加按钮

等都已经是jquery对象了，您不必通过在

$（）

中再次包装它们来创建另一个对象，就像

$（添加按钮）

“在生成新字段时有没有办法分配唯一的类”-我认为这不是正确的方法。。。类用于将公共项分组在一起，而不是唯一地标识一个项，因此使用

id

。我很确定这是个xy问题。如果你解释一下你到底想说什么