Fahad Iqbal Ahmad Khan Fahad Iqbal Ahmad Khan - 5 months ago 9
jQuery Question

Unable to show/hide div with jquery when creating ids on the fly

I am using jquery to get data from the database and want to use it as ids for multiple div. I am able to fetch the data from the database and then able to iterate the data as well using loop. But when i try to use the .prop() inside the loop, it does not work at all. When i try to log the values on console, its empty. Below is my code. Please help me out.

$(document).ready(function () {
$.get('/getInfringementTypes', function(data)
{
var parsed = JSON.parse(data);
//I am getting the following data back from db
// ["trademark", "copyright", "patent", "design", "other", "item-infringement"]
var valueArray = [];
$(parsed).each(function(index,value)
{
valueArray[index] = value;
});
var i = 0;

for(i=0; i < valueArray.length; i++)
{
$('#'+ valueArray[i]).click(function() {
if( $('#'+valueArray[i]).prop('checked',true)) {
$('#'+valueArray[i]+'List').show('5000');
}
});
console.log('#'+valueArray[i]+'List');
}
console.log(valueArray);
});
});


Here is my HTML code:

<div class="row">
<section>
<b>Verify Violation *</b>
<br>
@foreach(getInfringementTypes() as $infringements_type)
<input type="radio" name="groupVerify"
value="{{$infringements_type->infringement_type}}" id="{{Str::slug($infringements_type->infringement_type)}}"/>
<label for="{{Str::slug($infringements_type->infringement_type)}}">
{{$infringements_type->infringement_type}}
</label>
@endforeach
</section>
<br>
<section id="subCode">
<div id="trademarkList">
<b>Sub Code *</b>
<br>
@foreach(getParentCodeFromDb('Trademark') as $subcode)
<input type="radio" name="groupTrademark" value="{{$subcode}}" id="{{$subcode}}"/>
<label for="{{$subcode}}">
{{$subcode}}
</label>
@endforeach
</div>
<div id="copyrightList">
<b>Sub Code *</b>
<br>
@foreach(getParentCodeFromDb('Copyright') as $subcode)
<input type="radio" name="groupCopyright" value="{{$subcode}}" id="{{$subcode}}"/>
<label for="{{$subcode}}">
{{$subcode}}
</label>
@endforeach
</div>
<div id="patentList">
<b>Sub Code *</b>
<br>
@foreach(getParentCodeFromDb('Patent') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}"/>
<label for="{{$subcode}}">
{{$subcode}}
</label>
@endforeach
</div>
<div id="designList">
<b>Sub Code *</b>
<br>
@foreach(getParentCodeFromDb('Design') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}"/>
<label for="{{$subcode}}">
{{$subcode}}
</label>
@endforeach
</div>
<div id="otherList">
<b>Sub Code *</b>
<br>
@foreach(getParentCodeFromDb('Other') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}"/>
<label for="{{$subcode}}">
{{$subcode}}
</label>
@endforeach
</div>
<div id="itemList">
<b>Sub Code *</b>
<br>
@foreach(getParentCodeFromDb('Item infringement') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}"/>
<label for="{{$subcode}}">
{{$subcode}}
</label>
@endforeach
</div>
</section>
<br>
@if($filter['status'] == 'suspect')
<section>
<b>Product *</b>
<br>
<input name="groupProduct" type="radio" id="test1"/>
<label for="test1">Handbags-Rocco</label>
<input name="groupProduct" type="radio" id="test2"/>
<label for="test2">Handbags-Brenda</label>
<input name="groupProduct" type="radio" id="test3"/>
<label for="test3">Handbags-Dracy</label>
<input name="groupProduct" type="radio" id="test4"/>
<label for="test4">Handbags-Donna Hobo</label>
<input name="groupProduct" type="radio" id="test5"/>
<label for="test5">Handbags-Kristen</label>
<input name="groupProduct" type="radio" id="test6"/>
<label for="test6">Apparel-Apparel</label>
<input name="groupProduct" type="radio" id="test7"/>
<label for="test7">Footwear-Footwear</label>
<input name="groupProduct" type="radio" id="test8"/>
<label for="test8">Other-Other</label>
</section>
@endif
</div>

Answer

try the following:

$.each(parsed,function(i,v){
  if( $('#'+v).is(':checked')) {
      $('#'+v+'List').show('5000');
      $('div[id$=List]').not($('#'+v+'List')).hide();
  }
});