I wrote a script to take input from a clickable map and use that data to show or hide data collections hidden in a wrapper div. The script doesn't really work and I'm not sure what I'm doing incorrectly. Script is below for reference:
function createCallback( i ){
return function(){
jQuery(".stateText").addClass("hidden");
jQuery("#st_" + i + "-1").toggleClass("hidden");
};
};
jQuery(document).ready(function ($) {
for (let i = 1; i < 50; i++) {
$("#st_" + i).click( createCallback(i) );
};
});
The idea behind my reasoning is that the script iterates over the fifty states that are assigned IDs that correspond to their alphabetical order (e.g. Alabama = st_1, etc).
Each of the data for each state starts off as a hidden element with a unique ID (of form st_i-1). When the event fires, it should hide all other elements with the class 'statetext' and then toggle the class of the selected element.
Here is a sample of the code for the show/hide div:
<div id="data-area">
<div id="st_1-1" class="statetext hidden">
<h4>Alabama</h4>
<ul class="experience-list">
<li>Right of Way Land Services (Pipeline, Transmission, Telecommunications)</li>
<li>Mineral Property Management</li>
</ul>
<h4>Recent Projects</h4>
<ul class="experience-list">
<li>500+ mile multistate FERC pipeline</li>
<li>700+ mile multistate FERC pipeline</li>
<li>270+ mile multistate FERC pipeline</li>
</ul>
</div>
The actual application does not function properly. Click events often do not fire and the other divs are not getting the 'hidden' class added.
What am I doing wrong here?