Question

点击缩略图时，我正在创建类似图库的内容，应加载相应的大图片。

我尝试这样做的方法如下。

有一个图片标签如下：

<img src="gallery/[image name]" id="bigitem" />

缩略图如下：

<img src='gallery/thumbs/[image name]' alt='' at='[image name]' onclick='changePicture()' />

缩略图图像名称和大图像名称相同，自定义“at”属性包含相同的图像名称。 changePicture（）函数如下：

function changePicture() {
        var at = $(this).attr('at');     // getting the value of the "at" attribute of the thumbnail
        var newpath = 'gallery/'+at;
        $("#bigitem").attr('src', newpath);   // changing the "src" attribute of the big image.
        }

但是此功能不起作用。似乎我无法获得“this”的自定义属性值。

有人可以帮我弄清楚为什么会这样吗？

感谢。

Answer 1

那是因为this不是你想象的那样;在该上下文中this是window对象。您需要将this传递给onclick函数：

<img src="gallery/thumbs/[image name]" alt="" 
    at="[image name]" onclick="changePicture(this);" />

function changePicture(image) {
    var at = $(image).attr('at');
    var newpath = 'gallery/' + at;
    $("#bigitem").attr('src', newpath);
}

Answer 2

<img src='gallery/thumbs/[image name]' alt='' at='[image name]' onclick='changePicture(this)' />

function changePicture(obj) {
        var at = $(obj).attr('at');     // getting the value of the "at" attribute of the thumbnail
        var newpath = 'gallery/'+at;
        $("#bigitem").attr('src', newpath);   // changing the "src" attribute of the big image.
        }

您需要将this作为参数传递。

this指的是函数的调用者。当调用changePictures时（没有传递param）this引用onclick方法而不是img元素。通过传递this作为函数参数，您将传递实际节点（ onclick 的调用者）

使用jQuery更改缩略图上的图像源

2 个答案: