1

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

页面链接：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' 到 url，但我有点从这里迷路了。

有小费吗？我想我需要创建一个函数来指示一个链接被选中，并以某种方式将它与 .replace 元素合并。

4

2 回答 2

0

请注意：.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到突出显示的图像或类似的东西，并且只为该图像和新单击的图像进行交换。

于 2012-12-16T23:17:18.120 回答
0

jQuery 中一个常见的学习错误是专注于所有类型选择器的 ID。它们适用于非常少量的元素，但对于可以通过更简单的代码方法轻松管理的大量元素，它们变得非常笨拙。

您希望能够编写更通用的代码，其中一个处理程序将覆盖页面中共享相同功能的所有链接。

例子：

var $mainImage=$('#mainImage')

var $buildingLinks=$('.buildingliststyle a').click(function(){
      /* "this" is the link clicked*/
       /* get index of this link in the whole collection of links*/
       var index=$buildingLinks.index(this);
      /* perhaps all the image urls are stored in an array*/
      var imgUrl= imagesArray( index);
      /* perhaps the image urls are stored in data attribute of link( easy to manage when link created server side)*/
       var imgUrl=$(this).data('image');
      /* store the current image on display (not clear how page is supposed to work)*/
      var currImage=$mainImage.attr('src');

       $mainImage.data('lastImage', currImage);/* can use this to reset in other parts of code*/
       /* nw update main image*/
       $mainImage.attr('src', imgUrl);

       /* load ajax content for this link*/
       $('#ajaxContainer').load( $(this).attr('href') );

      /* avoid browser following link*/
       return false;                
});

 /* button to reset main image from data we already stored*/  
$('#imageResetButton').click(function(){
   $mainImage.attr('src',  $mainImage.data('lastImage') );
})

可以看到，通过在一个处理程序中处理一组元素可以用很少的代码做很多事情，而无需专注于 ID

上面的代码提到了可能将图像 url 存储在 data 属性中，例如：

<a href="ajaxUrl?id=345" data-buildingID="345" data-image="imageUrl-345">Building name</a>
于 2012-12-16T23:21:35.653 回答