图像改变，src 属性保持不变

Question

我遇到了一个问题，即图像元素的 src 属性在 ajax 请求后保持不变。该元素是另一个元素的“内部”元素，它被 .html(data) 函数@回调函数“替换”。奇怪的是，即使如我所说的 src 属性显示了源代码中最后一个图像的路径，新图像也会按原样显示。

这里是 JS：

    $('.toplistimages').each(function(){
    var filepath = $(this).attr('src');
    var next = "next"
    $(this).click(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: '?category=goto',
            data: {
                "filepath" : filepath,
                "next" : next
            },
            success: function(data){
                $('#rightvotecolumn').html(data);
            }
        });
        return false;
    });
});

内容替换成功，但src属性不变。

编辑：我还可以补充一点，当我尝试保存在 ajax 请求之后显示的图像时，会显示正确的文件名。我在 Firefox 和 chrome 上试试这个

Answer 1

我建议您在 Chrome 或 Firefox 中使用 F12 在控制台中检查源代码，而不是通过“查看源代码”选项检查源代码。

因为后面添加的动态数据在Page Source中是看不到的。

Answer 2

这种行为的原因是您只获得一次实际的src 值，并在每个click 事件处理程序中使用该值。要解决此问题，请在每个点击事件上设置文件名变量值：

$('.toplistimages').each(function(){
var next = "next"
$(this).click(function(e){
    e.preventDefault();
    var filepath = $(this).attr('src');
    $.ajax({
        type: 'POST',
        url: '?category=goto',
        data: {
            "filepath" : filepath,
            "next" : next
        },
        success: function(data){
            $('#rightvotecolumn').html(data);
        }
    });
    return false;
});

});