将四个单独的值保存到四个隐藏字段
Save four separate values to four hidden fields
目前我有四个独立的部分:Sole、Collar、Lining 和 Tongue。在每个部分中都有 selecting a material 的选项,下面的代码是其中两个部分的示例。
<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>
我创建了 div,这样当它们被点击时,它会获取 id 并将其传递给隐藏输入标签的值。
<input id="sole" class="material-value" type="hidden" value="sole_leather">
我遇到的问题是,如果我 select 皮革用于鞋底部分,例如它会填充所有四个隐藏的输入,如下面的代码所示。有没有一种简单的方法可以让隐藏的输入只应用于它相关的部分?
<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">
我还使用 JavaScript 遍历一组面板和 materials
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);
});
您可以添加另一个属性:data-segment
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);
到select正确的输入字段
试试这个:
$('.material-btn').click(function(){
var part = this.id.split('_')[0];
var matl = this.id.split('_')[1];
$('#'+part).val(matl);
});
备注:
(1) 使用 this.id
(纯粹的 javascript)而不是 $(this).attr('id')
只是因为它更快一点,而且更容易打字。对于此示例,它们的工作方式相同。对所有 jQuery 执行完全相同的操作:var matl = $(this).attr('id').split('_')[1];
(2) this.id.split('_')[1]
获取 id,例如 sole_leather
,并将其转换为数组,在每个 _
字符处拆分字符串。因此,您将得到一个像这样的数组:array('sole','leather')
——并且 [1]
选择位置 1 的元素(皮革)
(3) 为了将 material (nubuck) 保存到零件(鞋底)隐藏字段中,我们使用在步骤 2 中创建的存储变量。$('#'+part)
变为 $('#sole')
-这是唯一部分隐藏字段的ID。
(4) 在 jsFiddle 演示中,隐藏字段只是取消隐藏,以便您可以看到字段内正在更新的值。
/*
*/
$('.material-btn').click(function(){
var part = this.id.split('_')[0];
var matl = this.id.split('_')[1];
$('#'+part).val(matl);
});
#hiddenDIVs{width:80%;margin:30px auto;border:1px solid orange;}
.material-value{height:25px;width:60%;margin:5px auto;background:palegoldenrod;padding:2px 5px;}
.material-btn:hover{cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<div class="sole_panel container active"></div>
<div class="collar_panel container"></div>
<div class="lining_panel container"></div>
<div class="tongue_panel container"></div>
<div id="hiddenDIVs">
<input id="sole" class="material-value" type="text" value="" /> SOLE<br>
<input id="collar" class="material-value" type="text" value="" /> COLLAR<br>
<input id="lining" class="material-value" type="text" value="" /> LINING<br>
<input id="tongue" class="material-value" type="text" value="" />TONGUE<br>
</div>
仅出于演示目的,将输入类型保留为文本。
var a = document.querySelectorAll('.material-btn');
for(i=0;i<a.length;i++){
a[i].onclick = function(){
var type= this.getAttribute('target');
document.getElementById(type).value = this.innerHTML
}
}
<div class="sole_panel container active">
<h3>sole</h3>
<div id="sole_leather" class="material-btn" target="sole">leather</div>
<div id="sole_suade" class="material-btn" target="sole">suade</div>
<div id="sole_nubuck" class="material-btn" target="sole">nubuck</div>
</div>
<div class="collar_panel container">
<h3>collar</h3>
<div id="collar_leather" class="material-btn" target="collar">leather</div>
<div id="collar_suade" class="material-btn" target="collar">suade</div>
<div id="collar_nubuck" class="material-btn" target="collar">nubuck</div>
</div>
<div class="sole_panel container active"></div>
<input id="sole" class="material-value" type="text" value="sole_leather">
<div class="collar_panel container"></div>
<input id="collar" class="material-value" type="text" value="sole_leather">
<div class="lining_panel container"></div>
<input id="lining" class="material-value" type="text" value="sole_leather">
<div class="tongue_panel container"></div>
<input id="tongue" class="material-value" type="text" value="sole_leather">
目前我有四个独立的部分:Sole、Collar、Lining 和 Tongue。在每个部分中都有 selecting a material 的选项,下面的代码是其中两个部分的示例。
<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>
我创建了 div,这样当它们被点击时,它会获取 id 并将其传递给隐藏输入标签的值。
<input id="sole" class="material-value" type="hidden" value="sole_leather">
我遇到的问题是,如果我 select 皮革用于鞋底部分,例如它会填充所有四个隐藏的输入,如下面的代码所示。有没有一种简单的方法可以让隐藏的输入只应用于它相关的部分?
<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">
我还使用 JavaScript 遍历一组面板和 materials
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);
});
您可以添加另一个属性:data-segment
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);
到select正确的输入字段
试试这个:
$('.material-btn').click(function(){
var part = this.id.split('_')[0];
var matl = this.id.split('_')[1];
$('#'+part).val(matl);
});
备注:
(1) 使用 this.id
(纯粹的 javascript)而不是 $(this).attr('id')
只是因为它更快一点,而且更容易打字。对于此示例,它们的工作方式相同。对所有 jQuery 执行完全相同的操作:var matl = $(this).attr('id').split('_')[1];
(2) this.id.split('_')[1]
获取 id,例如 sole_leather
,并将其转换为数组,在每个 _
字符处拆分字符串。因此,您将得到一个像这样的数组:array('sole','leather')
——并且 [1]
选择位置 1 的元素(皮革)
(3) 为了将 material (nubuck) 保存到零件(鞋底)隐藏字段中,我们使用在步骤 2 中创建的存储变量。$('#'+part)
变为 $('#sole')
-这是唯一部分隐藏字段的ID。
(4) 在 jsFiddle 演示中,隐藏字段只是取消隐藏,以便您可以看到字段内正在更新的值。
/*
*/
$('.material-btn').click(function(){
var part = this.id.split('_')[0];
var matl = this.id.split('_')[1];
$('#'+part).val(matl);
});
#hiddenDIVs{width:80%;margin:30px auto;border:1px solid orange;}
.material-value{height:25px;width:60%;margin:5px auto;background:palegoldenrod;padding:2px 5px;}
.material-btn:hover{cursor:pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
<div class="sole_panel container active"></div>
<div class="collar_panel container"></div>
<div class="lining_panel container"></div>
<div class="tongue_panel container"></div>
<div id="hiddenDIVs">
<input id="sole" class="material-value" type="text" value="" /> SOLE<br>
<input id="collar" class="material-value" type="text" value="" /> COLLAR<br>
<input id="lining" class="material-value" type="text" value="" /> LINING<br>
<input id="tongue" class="material-value" type="text" value="" />TONGUE<br>
</div>
仅出于演示目的,将输入类型保留为文本。
var a = document.querySelectorAll('.material-btn');
for(i=0;i<a.length;i++){
a[i].onclick = function(){
var type= this.getAttribute('target');
document.getElementById(type).value = this.innerHTML
}
}
<div class="sole_panel container active">
<h3>sole</h3>
<div id="sole_leather" class="material-btn" target="sole">leather</div>
<div id="sole_suade" class="material-btn" target="sole">suade</div>
<div id="sole_nubuck" class="material-btn" target="sole">nubuck</div>
</div>
<div class="collar_panel container">
<h3>collar</h3>
<div id="collar_leather" class="material-btn" target="collar">leather</div>
<div id="collar_suade" class="material-btn" target="collar">suade</div>
<div id="collar_nubuck" class="material-btn" target="collar">nubuck</div>
</div>
<div class="sole_panel container active"></div>
<input id="sole" class="material-value" type="text" value="sole_leather">
<div class="collar_panel container"></div>
<input id="collar" class="material-value" type="text" value="sole_leather">
<div class="lining_panel container"></div>
<input id="lining" class="material-value" type="text" value="sole_leather">
<div class="tongue_panel container"></div>
<input id="tongue" class="material-value" type="text" value="sole_leather">