javascript - 寻求有关采取什么方法进行多个图像交换的建议

Question

我正在设计一个交互式大学校园 map ，需要一些关于我想做的事情的指导。

链接至页面:http://www.torontoclassfind.com/startpage.html

我希望能够单击顶部菜单中的链接(到目前为止，只有一个链接处于事件状态，并且它会加载左下 div 中的 Ajax 页面)，并将其与另一图像交换建筑图像以显示已被选中。

我可以通过以下方式做到这一点:

$("#buildinglink1").click(function () {
   $("#buildingimg1").attr("src","highlightedimage.gif")
})

问题是，一旦单击另一个菜单链接并选择了新建筑物，我就需要将图像更改回默认图像。

建筑物图像位于 www.torontoclassdfind.com/building/，突出显示的图像位于 www.torontoclassdfind.com/buildingc/，并且两个位置的建筑物名称相同。

我正在考虑使用 JQuery 的 .replace 元素来执行此操作(例如: jquery remove part of url )，这会删​​除或添加“c”到网址，但我有点迷失了。

有什么建议吗？我想我需要创建一个函数来指示已选择链接并以某种方式将其与 .replace 元素合并。

Answer 1

请注意:.replace 是 JavaScript 字符串(和其他)方法，而不是 jQuery 方法。

我认为您要求做这样的事情:

$(".any-building").click(function () {
   //replace all building sources with the unhighlighted version
   $(".any-building").attr('src', function () {
      return $(this).attr('src').replace('buildingc', 'building');
   });

   //replace clicked image with highlighted one
   $(this).attr('src', $(this).attr('src').replace('building', 'buildingc'));
});

一个可能的缺点是，对于大量图像，此交换可能需要很长时间或导致一些闪烁。如果是这种情况，那么您可能需要向突出显示的图像或类似的内容添加一个类 .active ，并且仅对该图像和新单击的图像进行交换。