javascript - 将 onclick 函数与图片库一起使用的更好方法

Question

我有一个在页面上显示小缩略图的图片库，当您单击特定缩略图时，会打开一个幻灯片模式，每组有 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>

Answer 1

在图库图像上放置点击处理程序，为您的图像添加数据图像属性，然后当单击图像时，您可以获得图库的 ID 以从中删除隐藏类。

$('.gallery_img').on('click', function(){
    var imageSetId = $(this).data('images');
    $('#' + imageSetId).removeClass('hidden');
});

您的图像的 HTML 看起来像这样:

<img id="port-img-one" data-images="img-set-one" ... />