javascript - JQuery 切换图像 CSS

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
});

更新的小提琴

Answer 2

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

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

小提琴

更新：

我意识到虽然我们都解决了问题，但单击大图像并没有切换它。我在以下代码中为此添加了一个函数：

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

更新的小提琴

Answer 3

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

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