CODEWITHSUNDEEP
javascriptjquery
Seb
Seb

Reputation: 525

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

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>

Upvotes: 0

Views: 45

Answers (2)

IrkenInvader
IrkenInvader

Reputation: 4050

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>

Upvotes: 2

Carlo
Carlo

Reputation: 652

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

Upvotes: 0

Related Questions