当我单击其他图片时，无花果标题不变

Question

当我单击不同的图像时，无花果标题说明了同样的事情，因此我试图对其进行更改，因此，当我单击不同的图像时，无花果标题会更改。

我试图进行更改，并且只能在每个图像下方放置无花果标题。请勿根据单击的图像来更改无花果标题。

<main id="gallery">

<h1> Get fit and stay fit with Betty Swannocks Fitness Center </h1>     
<figure> 
   <img src="images/gym4.jpg" alt="gym photos">
   <figcaption> Gym4 </figcaption>
   </figure>   

<ul>
<li><a href="images/gym1.jpg" title="gym1"><img src="images/gym1-150.jpg" width="150" height="100" alt="Fitness1"> </a> </li>  
<li><a href="images/gym2.jpg" title="gym2"><img src="images/gym2-150.jpg" width="150" height="100" alt="Fitness2"> </a></li>
<li><a href="images/gym3.jpg" title="gym3"><img src="images/gym3-150.jpg" width="150" height="100" alt="Fitness3"> </a></li>
<li><a href="images/gym4.jpg" title="gym4"><img src="images/gym4-150.jpg" width="150" height="100" alt="Fitness4"> </a> </li>
<li><a href="images/gym5.jpg" title="gym5"><img src="images/gym5-150.jpg" width="150" height="100" alt="Fitness5"> </a> </li>   
<li><a href="images/gym6.jpg" title="gym6"><img src="images/gym6-150.jpg" width="150" height="100" alt="Fitness6"> </a> </li>
</ul>   
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#gallery a').click(function(){
var galleryHref = $(this).attr('href');
var galleryAlt = $(this).attr('title');
$('figure img').attr({src:galleryHref, alt:galleryAlt});    
return false; 
});
})      
   </script>
</body>
</html>

我希望无花果标题会根据所单击的图像而变化，尽管单击了其他图像，它仍保持相同的无花果标题。