Loop using jquery and javascript

Question

I'm having some trouble thinking of how to do this properly.

Right now, I have some jquery that looks like this:

$( "#person_0" ).click(function() {
    $( "[id^=person_]" ).removeClass("active"); 
    $( "#person_0" ).addClass("active");
    $( "[id^=bio_]" ).hide();
    $( "#bio_0" ).show();
    $( "[id^=hoverInfo_]" ).hide();
    $( "#hoverInfo_0" ).show();
});

$( "#person_1" ).click(function() {
    $( "[id^=person_]" ).removeClass("active"); 
    $( "#person_1" ).addClass("active");
    $( "[id^=bio_]" ).hide();
    $( "#bio_1" ).show();
    $( "[id^=hoverInfo_]" ).hide();
    $( "#hoverInfo_1" ).show();
});
...
...

Essentially, if you click a person_0 div id, a class of active is added to that and both hoverInfo_0 and bio_0 show up. At the same time, all other ids go and hide (for example, hoverInfo_1, hoverInfo_2, bio_1, bio_2, etc.

This is super inefficient because I want there to be 100+ person_ ids. I feel like I'm overlooking something obvious.

Pseudo code right now:

    if person_0 div is clicked
        give person_0 div active class
        show hoverInfo_0
        show bio_0
        hide all other hoverInfo_# (say 1-1000)
        hide all other bio_# (say 1-1000)
    else if person_1 div is clicked
        give person_1 div active class
        show hoverInfo_1
        show bio_1
        hide all hoverInfo_# (say 1-1000) that does not equal hoverInfo_1
        hide all bio_# (say 1-1000) that does not equal bio_1
    else if ...
    else if ...

I'm having a hard time trying to figure out how I can loop this around or use a variable in place of the _# value to make this more efficient. Any thoughts?

Answer 1

how I can loop this around or use a variable in place of the _# value to make this more efficient. Any thoughts?

Try this approach using starts with and filter

$( "[id^='person_']" ).click(function() {
    var id = $( this )[0].id;    
    console.log(id);
    var counter = id.split("_").pop();

    $( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active"); 
    $( "[id^='bio_']" ).hide().filter( "#bio_" + counter  ).show();
    $( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});

Demo

$( "[id^='person_']" ).click(function() {
    var id = $( this )[0].id;    
    console.log(id);
    var counter = id.split("_").pop();

    $( "[id^='person_']" ).addClass("active").not( "#person_" + counter ).removeClass("active"); 
    $( "[id^='bio_']" ).hide().filter( "#bio_" + counter  ).show();
    $( "[id^='hoverInfo_']" ).hide().filter( "#hoverInfo_" + counter).show();
});

.bio, .hoberInfo
{
   display: none;
   background-color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="person_1">Person 1</div>
<div id="bio_1" class="bio">Bio 1</div>
<div id="hoverInfo_1" class="hoberInfo">HoverInfo 1</div>

<div id="person_2">Person 2</div>
<div id="bio_2" class="bio">Bio 2</div>
<div id="hoverInfo_2" class="hoberInfo">HoverInfo 2</div>

<div id="person_3">Person 3</div>
<div id="bio_3" class="bio">Bio 3</div>
<div id="hoverInfo_3" class="hoberInfo">HoverInfo 3</div>