javascript - JQuery循环遍历类获取属性值，然后根据属性值改变显示样式

Question

有一个 jQuery 循环，用于检查所有类 testfieldvalue 的属性值，然后显示一些与该值匹配的输入字段。

jQuery 循环选取两个值 1,2，但它在第一个 thefieldvalue 类中显示 2 个输入字段，而不是在第一个 thefieldvalue 类中显示一个输入字段code> 和第二个 thefieldvalue 处的两个，因为它应该。我做错了什么？

请查看工作示例:https://jsfiddle.net/m9xr870f/

var testfieldvalue = document.getElementsByClassName("testfieldvalue")[0].value;
var testfieldshow = document.getElementsByClassName("testfieldshow")[0];
var field1 = document.getElementsByClassName("Field_1")[0];
var field1label = document.getElementsByClassName("Field_1_label")[0];
var field2 = document.getElementsByClassName("Field_2")[0];
var field2label = document.getElementsByClassName("Field_2_label")[0];


$(".testfieldvalue[value]").each(function(){
 var testfield = ($(this).attr('value'));
 if (testfield == '1') {
 	testfieldshow.style.display = '';
 	field1.style.display = '';
 	field1label.style.display = '';
 } else if (testfield == '2') {
 	testfieldshow.style.display = '';
 	field1.style.display = '';
 	field1label.style.display = '';
 	field2.style.display = '';
 	field2label.style.display = '';
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Input 1
<input type="hidden" value="1" class="testfieldvalue">
<div class="testfieldshow" name="testfieldshow" style="display: none">
	<label class="Field_1_label" style="display: none">Field 1</label>
	<input type="text" class="Field_1" name ="Field_1" style="display: none">
	<label class="Field_2_label" style="display: none">Field 2</label>
	<input type="text" class="Field_2" name ="Field_2" style="display: none">
</div>
<br>
Input 2
<input type="hidden" value="2" class="testfieldvalue">
<div class="testfieldshow" name="testfieldshow" style="display: none">
	<label class="Field_1_label" style="display: none">Field 1</label>
	<input type="text" class="Field_1" name ="Field_1" style="display: none">
	<label class="Field_2_label" style="display: none">Field 2</label>
	<input type="text" class="Field_2" name ="Field_2" style="display: none">
</div>

Answer 1

您不想在循环上方定义变量，而是希望找到与内部 $(this) 相关的 Field_1、Field_2 及其标签循环。

一种方法是使用 jquery 函数 next() 和适当的选择器 - 在本例中是 next('.testfieldshow')

$(".testfieldvalue[value]").each(function(){
 var testfield = ($(this).attr('value'));
 var fieldShow = $(this).next('.testfieldshow');
 var field1 = fieldShow.find('.Field_1')[0];
 var field1label = fieldShow.find('.Field_1_label')[0];
 var field2 = fieldShow.find('.Field_2')[0];
 var field2label = fieldShow.find('.Field_2_label')[0]; 
 
 if (testfield == '1') {
 	fieldShow[0].style.display = '';
 	field1.style.display = '';  
 	field1label.style.display = '';
 } else if (testfield == '2') {
 	fieldShow[0].style.display = '';
 	field1.style.display = '';
 	field1label.style.display = '';
 	field2.style.display = '';
 	field2label.style.display = '';
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Input 1
<input type="hidden" value="1" class="testfieldvalue">
<div class="testfieldshow" name="testfieldshow" style="display: none">
	<label class="Field_1_label" style="display: none">Field 1</label>
	<input type="text" class="Field_1" name ="Field_1" style="display: none">
	<label class="Field_2_label" style="display: none">Field 2</label>
	<input type="text" class="Field_2" name ="Field_2" style="display: none">
</div>
<br>
Input 2
<input type="hidden" value="2" class="testfieldvalue">
<div class="testfieldshow" name="testfieldshow" style="display: none">
	<label class="Field_1_label" style="display: none">Field 1</label>
	<input type="text" class="Field_1" name ="Field_1" style="display: none">
	<label class="Field_2_label" style="display: none">Field 2</label>
	<input type="text" class="Field_2" name ="Field_2" style="display: none">
</div>