Javascript 将四个单独的值保存到四个隐藏字段中

目前，我有四个独立的部分：鞋底，衣领，衬里和舌头。在每个部分中都有选择材料的选项，下面的代码是其中两个部分的示例

<div class="sole_panel container active">
    <h3>sole</h3>
    <div id="sole_leather" class="material-btn">leather</div>
    <div id="sole_suade" class="material-btn">suade</div>
    <div id="sole_nubuck" class="material-btn">nubuck</div>
</div>
<div class="collar_panel container">
    <h3>collar</h3>
    <div id="collar_leather" class="material-btn">leather</div>
    <div id="collar_suade" class="material-btn">suade</div>
    <div id="collar_nubuck" class="material-btn">nubuck</div>
</div>

---

您可以添加另一个属性：数据段

mtr += '<div class="material-btn" id="' + segments + '_' + material + '" data-segment="' + segments + '">' + material + '</div>';

要选择正确的输入字段，请尝试以下操作：

注:

（1） 使用

this.id

（纯javascript）而不是

$（this.attr（'id'）

，这仅仅是因为它更快，更容易键入。对于本例，它们的工作原理相同。要对所有jQuery执行完全相同的操作：

var matl=$（this）.attr（'id'）.split（'uu'）[1]

（2） 
this.id.split（“'）[1]
获取id，例如
sole\u leather
，并将其转换为一个数组，在每个
字符处拆分字符串。因此，剩下的数组如下：
array（'sole'，'leather'）
--并且
[1]
选择位置1（leather）处的元素

（3） 为了将材料（nubuck）保存到零件（sole）隐藏字段中，我们使用在步骤2中创建的存储变量<代码>$（“#”+零件）

变为

$（“#sole”）

-这是唯一零件的隐藏字段的ID

（4） 在JSFIDLE演示中，隐藏字段被取消隐藏，只是为了让您可以看到字段内更新的值

---

/*
http://stackoverflow.com/questions/30038608/how-would-i-go-about-saving-four-separate-values-to-four-hidden-fields
*/
$（'.material btn'）。单击（函数（）{
var part=此.id.split（“"”）[0]；
var matl=此.id.split（“"”）[1]；
$（'#'+部分）.val（材料）；
});
#hiddenDIVs{宽度：80%；边距：30px自动；边框：1px实心橙色；}
.material值{高度：25px；宽度：60%；边距：5px自动；背景：一枝黄花；填充：2px 5px；}
.material btn:hover{cursor:pointer；}

鞋底
皮革
苏亚德
努巴克
衣领
皮革
苏亚德
努巴克
鞋底

项圈

衬里

舌头

仅出于演示目的，将输入类型保留为文本


var a=document.querySelectorAll（'.material btn'）；
对于（i=0；i这是您当前用于设置隐藏值的代码？编辑了我的答案。这应该行得通。出于好奇，为什么要执行两次拆分操作？为什么不使用第三个变量来保存数组？没有特殊原因，只是为了便于解释/理解。从技术上讲，最好是：只读取DOM一次，或者o只有两行代码？绳子有多长？
<div class="sole_panel container active"></div>
<input id="sole" class="material-value" type="hidden" value="sole_leather">
<div class="collar_panel container"></div>
<input id="collar" class="material-value" type="hidden" value="sole_leather">
<div class="lining_panel container"></div>
<input id="lining" class="material-value" type="hidden" value="sole_leather">
<div class="tongue_panel container"></div>
<input id="tongue" class="material-value" type="hidden" value="sole_leather">

panelArray     = ['sole','collar','lining','tongue'];
materialArray  = ['leather','suade','nubuck'];

//loop over array to create selectors
for (x = 0; x < panelArray.length; x++) {

    mtr = '';
    clr = '';               
    var segments = panelArray[x];

    //loop over materials 
    for (y = 0; y < materialArray.length; y++) {

        var material = materialArray[y];
        //console.log(material);

        mtr += '<div class="material-btn" id="' + segments + '_' + material + '">' + material + '</div>';
    }                 

    container += '<div class="' + segments + '_panel container"><h3>' + segments + '</h3>';
    container +=        mtr;
    container +=   '<div class="colour-container">';
    container +=        clr;
    container +=   '</div>';
    container += '</div>';
    container += '<input id="' + segments + '" class="material-value" type="hidden">';

}

$('.material-btn').on('click', function() {              

    $('.material-btn').removeClass('select');
    $(this).addClass('select');

    // passes material type selction to hidden field
    var value = $(this).attr('id');    
    var result = $('.material-value').attr('value', value);
    //console.log(result);
}); 

mtr += '<div class="material-btn" id="' + segments + '_' + material + '" data-segment="' + segments + '">' + material + '</div>';

var value = $(this).attr('id');    
var result = $($(this).data('segment')).attr('value', value);

$('.material-btn').click(function(){
    var part = this.id.split('_')[0];
    var matl = this.id.split('_')[1];
    $('#'+part).val(matl);
});