单击时使用jquery更改图像的css属性答案

【问题标题】：changing css property of image using jquery when clicked单击时使用jquery更改图像的css属性
【发布时间】：2011-06-16 02:11:33
【问题描述】：

所以我是整个 javascript 方面的初学者，这可能是一个真正的初学者问题。我一直在寻找答案，甚至尝试修改一些基本手风琴的源代码，但始终没有成功。

基本上我想编写一个函数，当您单击缩略图时，图像会展开。我已经把那部分记下来了，我想不通的是，当你点击另一个图像时，第一张图像会恢复为缩略图，而新点击的图像会展开。我希望它具有动画质量，但我会对基本功能感到满意，也许我可以自己解决如何制作动画。我的图片库在一个无序列表中，每个图片都设置为一个列表项，我正在尝试使用 jquery 来执行此操作。

提前致谢！！

这是我所做的，当您点击时图像会变大：

$('ul#live li img').click(function() {
    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });
});

我的CSS：

ul#live li img { 宽度：120px；高度：72px； }

就是这样。现在我想要的是能够点击另一张图片并让点击的第一张图片回到原来的 120 像素宽度。而已。我不想将其从流程中或任何类型的灯箱中删除。我这样做的方式可能不是最好的方式，我只是在学习和试验。希望这可以解决问题。

【问题讨论】：

标签： jquery thumbnails

【解决方案1】：

它可以相当直接地完成。我过去做过类似的事情是给扩展元素一个新类$(this).addClass('active_element');

然后您可以添加一个动画，以便在单击下一个项目时，首先影响带有.active_element 的任何项目 - 运行您的动画，删除类，然后为新选择的元素运行效果。

$('ul#live li img').click(function() {
    $('.active_element').animate({

    //close animation goes here

    });
    $('.active_element').removeClass('active_element');

    $(this).animate({
        'width': '515px',
        'height':'100%' 
    });

    $(this).addClass('active_element');

});

这可以写得更简洁一些，但这是逐步阐明的基本原则。

它又脏又脏，但能胜任。

【讨论】：

谢谢！！！我知道这将是非常简单的事情，但我就是不明白。这很有帮助！
removeClass 采用类名，而不是 CSS 选择器。我试图修复它，但我的编辑需要 6 个或更多字符，唯一需要更改的是删除“。”在 removeClass 参数中

【解决方案2】：

这是一个非常广泛的问题。你最终可能会编写一大堆代码来做一些你认为相当简单的事情。

对于初学者，我建议你使用 jQuery 插件。然后你只需要做一些最小的设置和配置，同时你可以把它拆开来了解它是如何工作的。

我喜欢一个叫 prettyPhoto 的工具，它的功能与您描述的类似，而且功能更多。如果不合适，还有许多不同的 jQuery 插件，它们除了处理缩略图、画廊、幻灯片、灯箱和所有可以想象的组合之外什么都不做。

【讨论】：