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" ... />

使用图库的onclick功能的更好方法

1 个答案: