AddClass - removeClass selon le str

Bonjour,
J'ai très peu d'expérience en jquery et là, je bloque...

Voici mon html :

<div class="filtre">
<ul>
<li class="type01"><a href="#" class="inactive">Menu chose</a></li>
<li class="type02"><a href="#" class="inactive">Menu machin</a></li>
<li class="type03"><a href="#" class="inactive">Menu truc</a></li>
</ul>
</div>

<div class="bonhommes">

<img class="inactive type01" src="img/content/chercheurs.png"></img>
<img class="inactive type02" src="img/content/chercheurs.png"></img>
<img class="inactive type03" src="img/content/chercheurs.png"></img>


</div>

Je voudrais qu'au click du a de type01, l'image de type01 s'active (removeClass inactive, addClass active)... et ainsi de suite...sans devoir écrire des lignes pour chacun des menus. Il faudrait qu'il repère les 2 derniers éléments de ma class (01, 02, 03...).


J'ai bidouillé mais ca ne fonctionne pas...


var str = $(this).attr("class");
if (str!==undefined && str!='' && str.length > 2)
$('.filtre ul li.type' + str).click(function( index ) {
{
$('.bonhommes img.type' + str).removeClass( 'inactive' );
$('.bonhommes img.type' + str).addClass( 'active' );
}


});



Merci merci merci.....

Suggestion de solution qui se base sur l'index de chaque élément = sa position dans la liste par rapport à ses frères. Inutile de passer par des classes

http://codepen.io/anon/pen/RWdmLX

J'ai rajouté un border dans l'exemple pour visualiser les changements de classe active/inactive.

Merci merci mais...

J'ai plusieurs chercheurs, je peux en avoir 3 pour le menu 1, 6 pour le 2 et ainsi de suite...

<div class="filtre">
<ul>
<li class="type01"><a href="#" class="inactive">Menu chose</a></li>
<li class="type02"><a href="#" class="inactive">Menu machin</a></li>
<li class="type03"><a href="#" class="inactive">Menu truc</a></li>
</ul>
</div>

<div class="bonhommes">

<img class="inactive type01" src="img/content/chercheurs.png"></img>
<img class="inactive type01" src="img/content/chercheurs.png"></img>
<img class="inactive type01" src="img/content/chercheurs.png"></img>

<img class="inactive type02" src="img/content/chercheurs.png"></img>
<img class="inactive type02" src="img/content/chercheurs.png"></img>
<img class="inactive type02" src="img/content/chercheurs.png"></img>
<img class="inactive type02" src="img/content/chercheurs.png"></img>
<img class="inactive type02" src="img/content/chercheurs.png"></img>
<img class="inactive type02" src="img/content/chercheurs.png"></img>
<img class="inactive type02" src="img/content/chercheurs.png"></img>

<img class="inactive type03" src="img/content/chercheurs.png"></img>
<img class="inactive type03" src="img/content/chercheurs.png"></img>


</div>