用 jQuery 替换 img src 属性不起作用

Question

我正在尝试创建简单的幻灯片，如果我单击图像，它将变成下一个图像。到目前为止，我在一个名为 1-4 的子文件夹中有四个图像（例如：1.jpg、2.jpg、3.jpg、4.jpg）。 我设置了一个计数器（变量 imgcounter），如果它大于 4，它将重置为 1，我使用此计数器轻松更改 img 元素的 src 名称。

简单版：

$(document).ready(function() {
var imgcounter = 1; 
$('#slide img').each(function() {
    $(this).click(function() {
        if(imgcounter <= 4 ) {
            imgcounter++;
            $(this).attr('src', 'images/' + imgcounter + '.JPG');
        } // end if
        else {
            var imgcounter = 1;
            $(this).attr('src', 'images/' + imgcounter + '.JPG');
        } // end else
    }); // end click    
}); // end each
});  // end ready

在这个版本中，即使我点击它，图像也不会改变。

我也尝试过这种更复杂的方法，在该方法中我放置了一个变量来定义我想用什么来替换 source。我不确定我是否正确使用了 replace() 函数，尤其是在我使用双撇号 '' 表示我要替换整个 src 的部分。我也不确定我是否合法地写出了 replace() 函数的第二部分——'images/' + imgcounter + '.JPG'。

$(document).ready(function() {
var imgcounter = 1; 
$('#slide img').each(function() {
    var imgFile = $(this).attr('src');
    var preloadImg = new Image();
    $(this).click(function() {
        if(imgcounter <= 4 ) {
            imgcounter++;
            preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG');
            $(this).attr('src', preloadImg.src);
        } // end if
        else {
            var imgcounter = 1;
            preloadImg.src = imgFile.replace('', 'images/' + imgcounter + '.JPG');
            $(this).attr('src', preloadImg.src);
        } // end else
    }); // end click    
}); // end each
});  // end ready

在这个版本中，图像发生了变化，但我得到了一个损坏的图像符号，错误控制台显示： 加载资源文件失败：///..（取出完整路径）../images/1.JPGimages/1.JPG 我不确定为什么它无法替换整个源代码，而是似乎只是在末尾附加了源名称的副本......

提前感谢您的帮助！

Answer 1

我会这样做：

var imgcounter = 1;

$("#slide img").click(function(e){
    if(imgcounter < 4){
        imgcounter++;
    }else{
        imgcounter = 1;
    }
    $(this).attr("src", "images/"+imgcounter+".jpg");
});

无论如何，它将处理程序添加到#slide 内的每个img，因此不需要each() 函数，它看起来更干净。 此外，删除了对$(this).attr() 的冗余调用。