Смена картинки по цвету
 

Здравствуйте. Наведите пожалуйста на мысль. Есть много блоков, в которых есть изображения. Цель: по клику на 1 или 2 или 3.. поменять изображение в блоке на следующее по нумерации.

<figure class="item item-h2" >
	<figcaption>
		<img src="/d/402010/d/detal-dfdf.jpg">
                <img src="/d/402010/d/detal-sdfg.jpg" style="display:none">
                <img src="/d/402010/d/detal-gdfgsr.jpg" style="display:none">
                <span class="click">1</span>
                <span class="click">2</span>
                <span class="click">3</span>
         </figcaption>
</figure>
<figure class="item item-h2" >
	<figcaption>
		<img src="/d/402010/d/detal-jhhg.jpg">
                <img src="/d/402010/d/detal-fghfj.jpg" style="display:none">
                <img src="/d/402010/d/detal-tryrt.jpg" style="display:none">
                <span class="click">1</span>
                <span class="click">2</span>
                <span class="click">3</span>
         </figcaption>
</figure>

Код я начал так.

$( "figure figcaption" ).on( "click", "span", function() {
  var index = $(this).index();
  console.log( $( this ).index() );
});

Подскажите как дальше действовать.

Набросок

<figure class="item item-h2" >
	<figcaption>
		<img src="http://javascript.ru/cat/list/dom.gif">
                <img src="http://javascript.ru/cat/list/event.gif" style="display:none">
                <img src="http://javascript.ru/cat/list/integr.jpg" style="display:none">
                <span class="click">1</span>
                <span class="click">2</span>
                <span class="click">3</span>
         </figcaption>
</figure>
<figure class="item item-h2" >
	<figcaption>
		<img src="http://javascript.ru/cat/list/donkey.gif">
                <img src="http://javascript.ru/cat/list/libs.jpg" style="display:none">
                <img src="http://javascript.ru/cat/list/js.gif" style="display:none">
                <span class="click">1</span>
                <span class="click">2</span>
                <span class="click">3</span>
         </figcaption>
</figure>
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script>
$( "figure figcaption span" ).on( "click",  function() {
  var index = $(this).text();
 $( this.parentNode).find("img").each(function(i,item) {
       i == index - 1 ? item.style.display = "inline": item.style.display = "none";
  });
});
</script>

Благодарю, то что нужно. Только span будет без текста, поэтому заменил $(this).text() на $(this).attr('data-number').