Question

我正在使用Jquery来更改某些图像的CSS。

单击时可以工作并更改图像css大小。唯一的问题是当我点击下一张图片时，前一张图片会停留使用新的css切换。

有没有办法当我点击下一张图片时，上一张图片会返回原来的css。

我在这里包含了一个jsfiddle示例： http://jsfiddle.net/webdott/hSFpp/

这是jquery代码：

$('img').click(function() {
    $(this).toggleClass('thumb fullview')
});

您可以看到您点击的每张图片都很大。

由于

Answer 1

您需要从所有其他fullview元素中删除img类，然后再将其添加到单击的元素中。试试这个：

$('img').click(function() {
    $('img').removeClass('fullview'); // remove class from all
    $(this).addClass('fullview'); // add class to clicked img
});

Updated fiddle

Answer 2

尝试删除img“fullview”上的课程，然后将其添加到$(this)。

$('img').click(function() {
    $('img').removeClass('fullview');
    $(this).addClass('fullview');
});

Fiddle

<强>更新

我意识到尽管我们都解决了这个问题但是点击大图并没有切换它。我在下面的代码中添加了一个函数：

if ( $('img').hasClass('fullview') ) {
    $(this).click(function() {
        $(this).removeClass('fullview');
});
}

UPDATED FIDDLE

Answer 3

检查这个小提琴。我解决了你的问题。请查看这个小提琴http://jsfiddle.net/Resey/1/

$('img').click(function() {
    $(this).toggleClass('fullview').siblings().removeClass('fullview');
});

JQuery切换图像CSS

3 个答案: