Question

得到一个jQuery循环，该循环检查所有类testfieldvalue是否具有attribute value，然后显示多个与该值匹配的输入字段。

jQuery循环同时获取两个值1,2，但在第一个thefieldvalue类中显示2个输入字段，在第一个thefieldvalue中不显示一个输入字段，而在第二个{{1}中则显示两个输入字段} 正如它应该。我在做什么错了？

thefieldvalue

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 = '';
 }
});

Answer 1

与其在循环上方定义变量，不如在循环内查找Field_1，Field_2及其与$(this)相关的标签。

一种方法是使用带有适当选择器的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>

Answer 2

您正在使标签和输入可见

testfieldshow.style.display = '';
field1.style.display = '';
...

但变量testfieldshow，field1 ...初始化为

var testfieldshow = document.getElementsByClassName("testfieldshow")[0];

最后的[0]使选择器document.getElementsByClassName("testfieldshow")总是选择文档中找到的第一个，因此第一个div为类testfieldshow

因此，您将display = ''两次应用于相同的元素

jQuery遍历类以获取属性值，然后根据属性值更改显示样式

2 个答案: