javascript - 为什么我的 src 切换使用 jquery 和左/右 keyup 事件随机中断？

Question

我想使用 jquery 建立一个相册，但我大部分时间都在使用它，但出于某种原因，有时 src 没有得到正确的更改(大多数时候它会更改)，即使事件的拇指类是正确并交换，我尝试了一切，但有一个错误让我无法理解

HTML

<div class="container gallery">
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8 bigImgArea">
            <img src="" class="fullImg">
        </div><!-- end bigImgArea -->
    </div><!-- end row -->
    <div class="row">
        <div class="col-xs-12 thumbnails">
            <img src="IMG_8943_thumb.jpg" class="thumb active">
            <img src="22_thumb.jpg" class="thumb">
            <img src="IMG_8943_thumb.jpg" class="thumb">
        </div><!-- end thumbnails --> 
    </div><!-- end row -->
</div><!-- end gallery -->

脚本

$(document).ready(function (){
    var next = $(".active").next().attr("src");
    var prev = $(".active").attr("src");
    $(".thumb").hover(function(){
             $(this).css("cursor","pointer");
        });

        $(".thumb").mousedown(function (){       
        var regex = $(this).attr("src");
         regex = regex.replace("_thumb", ""); //images and thumbnails have same filename, extept thumbs have _thumb at the end
          $(".fullImg").hide().attr("src",regex).fadeIn(600); 
        });

    $(document).keyup(function(e){
 // go right from active thumb
        if (e.keyCode == 39){
            var regex = next.replace("_thumb", "");
            $(".fullImg").hide().attr("src",regex).fadeIn(600);                                                
            next = $(".active").next().attr("src");
            prev = $(".active").attr("src");
            curr = $(".active");
            $(".active").next().addClass("active");
            curr.removeClass("active");
            regex= "";
 // go left
        } else if(e.keyCode == 37){
            var regex = prev.replace("_thumb", "");
            $(".fullImg").hide().attr("src",regex).fadeIn(600);
            curr = $(".active");
            $(".active").prev().addClass("active")         
            curr.removeClass("active");
            next = $(".active").next().attr("src");
            prev = $(".active").attr("src");
            regex ="";                
        }            
    });
    console.log(c);
});

Answer 1

你能试着设置一个 fiddle 吗？据我所知，你最好换掉 <img/>

要么克隆()下一个/上一个并用它替换'事件'。

切换 src 属性总是“有风险的”并且支持很差。 根据我的内存，FF 有一个错误，您需要先更改为“#”，然后切换到新的图像源。

同样，我建议您切换整个 <img/>标签