如何使用 jQuery 将活动状态动态添加到画廊缩略图答案

【问题标题】：How to dynamically add an active state with jQuery to a gallery thumbnail如何使用 jQuery 将活动状态动态添加到画廊缩略图
【发布时间】：2011-03-09 21:49:05
【问题描述】：

我正在使用galleriffic 来处理我的图片库，但我遇到了缩略图活动状态的问题。

Galleriffic 不支持图像上的活动状态 - 仅支持列表项。现在，画廊将为包含缩略图的当前 LI 分配一个“选定”类，我一直在尝试使用 jQuery 来定位活动 LI 中的缩略图 ID，因此我为图像分配了一个活动状态，然后将其返回给默认状态。

基本上我在做：

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg');

这可行，但是，我无法让图像在之后恢复默认值。我不认为 jQuery 支持在 if 语句中使用 hasClass，但如果有人知道请帮忙。欢迎任何建议。

【问题讨论】：

标签： javascript jquery jquery-plugins jquery-selectors

【解决方案1】：

你能试试:not 选择器吗？您当前正在执行此操作以获取所选图像：

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg');

尝试这样做以获得未选择的图像：

$(':not(.selected) img#myImage').attr('src', 'path_to_active_state.jpg');

【讨论】：

【解决方案2】：

您可以为活动图像添加一个类，以便以后识别它..

所以

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg').addClass('altered');

当突出显示另一个缩略图时

$('.altered').attr('src', 'path_to_inactive_state.jpg').removeClass('altered');

在您的示例中，$('.selected img#myImage') 似乎也暗示您对所有缩略图使用相同的 id (#myImage)。 Id 在 DOM 中应该是唯一的..

【讨论】：

是的，我为所有图像分配了唯一的 ID，这样我就可以以不同的方式定位它们。我希望写一些东西来获取原始来源，将其存储在一个变量中，分配活动图像的新来源，然后在选择另一个缩略图时将其返回到原始来源。感谢您的回复。
@Patrick，您需要在缩略图的活动/非活动路径后面创建一个逻辑。这样您就可以在不知道原始状态或更改状态的情况下使它们处于活动/非活动状态...... （例如，some-image.jpg 表示正常，some-image-active.jpg 表示活动，并操作 src 以添加/删除此后缀）。在我的代码中，我向您展示了如何将一个类添加到活动的类，以便您以后可以找到它并将其返回到非活动图像..