在图像库中使用onclick函数的更好方法

我有一个图片库,在一个页面上显示小缩略图,当你点击一个特定的缩略图,幻灯片放映模式打开,每组有2-3张图片。而不是列出每个 onClick 方法在我的脚本中,我想知道是否有更好的方法来针对相同的元素,并以更干净、更易于阅读的方式获得相同的效果。

我的代码的关键是你点击缩略图,一个图像列表(ul)出现,你可以在它们之间滑动。

我只想简化为选定缩略图的正确ul的点击和定位。

jQuery:

$('#port-img-one').on('click', function(){
    $('#img-set-one').removeClass('hidden');
});
$('#port-img-two').on('click', function(){
    $('#img-set-two').removeClass('hidden');
});

HTML:

    <div class="row work_gallery">
        <div class="offset-md-1 col-md-5 gallery_block gallery_block_left" id="block-1">
           <!-- This is whats being clicked -->
            <img id="port-img-one" class="gallery_img" src="{{ 'assets/images/solari.jpg' | url }}" alt="solari melange website">
        </div>
        <div class="col-md-5 gallery_block gallery_block_right" id="block-1">
            <img id="port-img-two" class="gallery_img" src="{{ 'assets/images/solari.jpg' | url }}" alt="solari melange website">
        </div>
    </div>
<div class="row modal_top">
    <div class="col-12 modal_img_wrapper">
        <!-- The matching ul needs to be revealed -->
        <ul class="images hidden" id="img-set-one">
            <li>
                <img class="main_img mySlides"src="{{ 'assets/images/solari.jpg' | url }}" alt="">
            </li>
            <li>
                <img class="other_img mySlides"src="{{ 'assets/images/NAME.png' | url }}" alt="">
            </li>
        </ul>
        <ul class="images hidden" id="img-set-two">
            <li>
                <img class="main_img mySlides"src="{{ 'assets/images/NAME.png' | url }}" alt="">
            </li>
            <li>
                <img class="other_img mySlides"src="{{ 'assets/images/solari.jpg' | url }}" alt="">
            </li>
        </ul>
        <ul class="triggers">
            <li class="img_nav" id="one"></li>
            <li class="img_nav" id="two"></li>
            <li class="img_nav" id="three"></li>
            <li class="img_nav" id="four"></li>
        </ul>
    </div>
</div>