JQuery loop through classes for attribute value, then change the display style depending on the attribute value

Question

Got a jQuery loop that checks all the classes testfieldvalue for what the attribute value they have, then shows a number of input fields that is matching the value.

The jQuery loop picks up both values 1,2 but it displays 2 input fields at the first thefieldvalue class, not one at the first thefieldvalue and two at the second thefieldvalue as it should. What am i doing wrong?

Please look at working example: 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>

You can create a runnable snippet here on Stack Overflow with Stack Snippets, which will make it easier for people to answer your question. — Heretic Monkey
– Heretic Monkey, Commented Feb 21, 2019 at 19:15

IrkenInvader · Accepted Answer · 2019-02-21 19:32:52Z

Instead of defining variables above your loop you want to find the Field_1, Field_2 and their labels in relation to $(this) inside the loop.

One way to do that is by using the jquery function next() with the appropriate selector - in this case 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>

That makes so much more sense to find the values in relation to $(this). I got alot of learning to do now, thank you for the explanation, makes it so much easier to understand! :)

Carlo · Accepted Answer · 2019-02-21 19:32:45Z

0

You are making the labels and input visible by doing

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

but the variables testfieldshow, field1 ... are initialized as

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

That [0] at the end makes the selector document.getElementsByClassName("testfieldshow") always pick the first found in the document, therefore the first div with class testfieldshow

So you are applying the display = '' on the same elements twice

answered Feb 21, 2019 at 19:32

Carlo

6521 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

JQuery loop through classes for attribute value, then change the display style depending on the attribute value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related