Изменить источник изображения при нажатии на миниатюру с помощью jQuery - PullRequest
Новая
       4

Изменить источник изображения при нажатии на миниатюру с помощью jQuery

1 голос
/ 02 сентября 2011

Я создаю что-то вроде галереи, при нажатии на миниатюру следует загрузить соответствующее большое изображение.

Способ, которым я пытаюсь это сделать, заключается в следующем.

Существует тег изображения: 

<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".

Может ли кто-нибудь помочь мне выяснить, почему это происходит?

Спасибо.

Ответы [ 2 ]

3 голосов
/ 02 сентября 2011

Это потому, что 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);
}
2 голосов
/ 02 сентября 2011 
<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 (без переданного параметра) this относится к методу onclick, а не к элементу img.Передав this в качестве параметра функции, вы передаете фактический узел (вызывающий onclick )

...