JQuery切换图像CSS

JQuery toggle images CSS

本文关键字：CSS 图像 JQuery      更新时间：2023-09-26

我正在使用Jquery来更改一些图像的css。

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

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

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

这是jquery代码：

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

您可以看到，单击的每个图像都保持较大。

感谢

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

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

更新的fiddle

尝试删除img"fullview"上的类，然后将其添加到$(this)中。

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

Fiddle

更新：

我意识到，尽管我们都解决了这个问题，但点击大图像并不能切换它

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

更新的FIDDLE

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

$('img').click(function() {
    $(this).toggleClass('fullview').siblings().removeClass('fullview');
});
相关文章：