带有缩略图箭头键和单击的图像查看器 - 无法再次聚焦于单击

Question

我有一个相当简单的图像查看器，它将小图像（缩略图）放入 div 中，并允许用户通过左右箭头浏览缩略图并查看下面的较大图像。当页面加载时，它还会聚焦第一个图像的标签，并在按下箭头键时继续移动焦点。这一切都很棒。

但我想为此添加功能，用户还可以单击缩略图（小）图像，而不是必须用箭头指向它。因此，我在注释“Clickable Code”下添加了代码。它在 class="figure" div 中渲染图像方面工作得很好，并且我像箭头功能一样添加了焦点类（并将其从现有类中删除），但我似乎无法获得新的单击标签显示焦点。我读过几十篇文章并尝试了许多不同的事情，我想我一定是不理解某些东西。下面的代码显示了我在“$('.focused').focus()”行上所做的最后一次尝试。

非常感谢您为渲染焦点提供的任何帮助！

这是标记部分：

<div class="DocumentList col-xs-12 d-inline-block">
    @{
        bool first = true;
        @foreach (ImageModel image in Model.images)
        {
            string base64String = "";
            image.IsSelected = true;
            base64String = "data:image/png;base64," + Convert.ToBase64String(image.Data, 0, image.Data.Length);
            
            if (first)
            {
                <a href='#' class="focusable focused clickable d-inline-block"><img class="imageSelect" src="@base64String" /></a>
                first = false;
            }
            <a href='#' class="focusable clickable d-inline-block"><img src="@base64String" /></a>
        }
    }
</div>
<br />

<div class="figure">
    <img type="password" src="https://imgTest.jpeg">
</div>

这是适用于箭头选择的原始 JQuery：

    $('.focused').first().focus();
    var firsturl = $('.focused').first().find('img').attr('src');
    $('.figure img').attr('src', firsturl);

    // actual code
    $(document).keydown(function (e) {
        if (e.keyCode == 37) { // left
            if ($('.focused').prev('.focusable').length){
                $('.focused').removeClass('focused').prev('.focusable').focus().addClass('focused');
                var thissource = $('.focused').find('img').attr('src');
                //alert($('.focused').prev('.focusable').length);
                $('.figure img').attr('src', thissource);
            }
        }
        if (e.keyCode == 39) { // right
            if ($('.focused').next('.focusable').length) {
                $('.focused').removeClass('focused').next('.focusable').focus().addClass('focused');

                var thissource = $('.focused').find('img').attr('src');
                //alert($('.focused').next('.focusable').length);
                $('.figure img').attr('src', thissource);
            }
        }
    });

这里是能够单击小（缩略图）图像的代码。它可以在“图形”类中显示图像，但无论我如何尝试，我都无法让焦点回来。

    //Clickable Code
    $('.clickable img').click(function () {
        $('.focused').removeClass('focused').addClass('focusable')
        jQuery(this).parents('a').addClass('focused').focus()
        $('.focused').focus()
        let clickSrc = $(this).attr('src')
        $('.figure img').removeAttr('src')
        $('.figure img').attr('src', clickSrc)
    })

Answer 1

首先单击缩略图时，您必须从所有链接中删除

focused

类。

然后要关注当前单击的拇指图像，您需要找到其

.closest()

链接

<a>

并向其添加

focused

类。

您也可以显着减少代码

工作片段：

$('.clickable img').click(function() {
  $('.clickable').removeClass('focused');
  $(this).closest('a').addClass('focused');
  $('.figure img').attr('src', $(this).attr('src'));
})

.focused img{
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="DocumentList col-xs-12 d-inline-block">
  <a href='javascript::void(0);' class="focusable focused clickable d-inline-block">
    <img class="imageSelect" src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" height="60" width="60" />
  </a>
  <a href='javascript::void(0);' class="focusable clickable d-inline-block">
    <img src="https://previews.123rf.com/images/kamchatka/kamchatka1005/kamchatka100500301/6937927-zebras-on-lake.jpg" height="60" width="60" />
  </a>
</div>
<br />

<div class="figure">
  <img type="password" src="https://letsenhance.io/static/8f5e523ee6b2479e26ecc91b9c25261e/1015f/MainAfter.jpg" height="300" width="300">
</div>