Question

我有点不熟悉所有JS的东西，除了今天我需要使用一些jQ魔法，我读了几篇文章，这就是我所做的：

$('.thumb_img').click(function() {
    $(this).attr('src', $(this).attr('src').replace('img/', 'img/full/'));
})

一切都很完美，但我需要让它翻转。此功能的基本思想是更改用户单击的图像的src（只需在路径中添加“/ full”），如果再次单击已修改的图像，则从路径中删除“/ full”。

我真的不知道如何制作它。感谢您提前提供任何帮助。

Answer 1

一种方法：

$( '.thumb_img' ).click( function () {
    var src = this.src;

    if ( src.indexOf( '/full/' ) !== -1 ) {
        src = src.replace( '/full/', '/' ); 
    } else {
        src = src.replace( 'img/', 'img/full/' );
    }

    this.src = src;
});

活动授权：

$( '#images' ).delegate( '.thumb_img', 'click', function () {
    var src = this.src;

    if ( src.indexOf( '/full/' ) !== -1 ) {
        src = src.replace( '/full/', '/' ); 
    } else {
        src = src.replace( 'img/', 'img/full/' );
    }

    this.src = src;
});

其中#images选择包含所有图片的<div id="images">元素。

Answer 2

$('.thumb_img').click(function() {
    //Store your src value so you don't need to get it again.
    var src = $(this).attr('src');
    //Determine whether the image is currently "full"
    var full = src.indexOf('full/') > -1; 
    //If it's full, remove it, otherwise, put it in the src.
    src = full ? src.replace('img/full/', 'img/') : src.replace('img/', 'img/full/');
    //Set your SRC value
    $(this).attr('src', src); 
})

Answer 3

$('.thumb_img').not('.state').click(function() {
    $(this).attr('src', $(this).attr('src').replace('img/', 'img/full/')).toggleClass('.state');
})
$('.thumb_img.state').click(function() {
    $(this).attr('src', $(this).attr('src').replace('img/full/', 'img/')).toggleClass('.state');
})

您可以使用班级切换。

jQuery函数（切换img的src attr）

3 个答案: