2

在过去的三天里，我一直在挠头，试图弄清楚如何解决我的问题。

在此页面上想要做什么http://www.hungryhippo.se/test/contact.html 是当悬停在办公室 DIV 上时，该办公室的人以其他人的不透明度为 50 的方式突出显示%。

第二阶段是同时点击或悬停地图被替换为与该办公室相关的地图。我在尝试解决此问题时注意到的是，我无法使用隐藏，因为我通过 Dreamweaver 获得的谷歌地图小部件出现错误并显示灰色条而不是地图。

然后我从 jsfiddle 使用了这个脚本 /TennG/

因此，我一直在考虑的一种解决方案是使用可见性，然后隐藏的那些将具有高度 0px，然后在应该显示时放大到 100%。

即使你不给我完整的代码（可以理解），也请把我推向正确的方向。不是 HTML 中的能手，jquery 对我来说是新的尝试赶上那一点。

谢谢！

4

2 回答 2

2

您页面上的 HTML 太复杂（您似乎患有 divitis），无法直接回答您需要用它做什么，但在一般意义上，只要您有某种方式将“标题”办公室 div 与个人 div 添加淡入淡出效果相当简单。例如，您可以为data-标题赋予一个属性以指定所有相关人员 div 将具有的类，如下所示：

<div class="office" data-office="Stockholm">Stockholm Office</div>
<div class="office" data-office="Denmark">Denmark Office</div>
<div class="office" data-office="LA">Los Angeles Office</div>

<div class="person Stockholm">Stockholm<br>Amanda Atkins</div>
<div class="person Stockholm">Stockholm<br>Benjamin Bovington</div>
<div class="person Denmark">Denmark<br>Carolyn Carson</div>
<div class="person LA">Los Angeles<br>Dave Duncan</div>
<div class="person LA">Los Angeles<br>Evelyn Edwards</div>

然后将悬停处理程序添加到具有“office”类的 div 中，该处理程序将使用该data-office属性来查找关联的人员 - 或者在您的情况下查找未关联的人员以降低其不透明度：

$(document).ready(function() {
    $(".office").hover(function() {
        $(".person").not("." + $(this).attr("data-office")).fadeTo(100, 0.5);
    }, function() {
        $(".person").not("." + $(this).attr("data-office")).fadeTo(100, 1);
    });
});

演示：http: //jsfiddle.net/EHrcb/

（“person” div 也可以使用data-属性，但按类选择更简单，所以我就是这样做的。）

我想您可以使用相同的概念为每个办公室显示适当的地图，但使用.hide()和.show()或设置可见性或其他内容而不是设置不透明度。

请注意，您现有的 html 是无效的：您不应该id对多个元素使用相同的。

于 2012-11-25T01:14:26.470 回答
2

使用 jQuery 的人的解决方案

您可以向任何元素添加多个类，以便为您的人员添加代表城市的类，以及用于平移地图的数据属性（请参阅答案底部的最后编辑中的注释）

<div class="contact_office_people stockholm" data-map-coordinates="[ lat,lng]">

在您的办公室位置 DIVdata-为办公室添加一个 html5 属性，可以使用 jQuerydata()方法轻松读取

<div class="contact_office_container" data-office="stockholm">

现在可以使用 jQueryhover()

var $people=$('.contact_office_people');

$('.contact_office_container').hover(function(){
     /* this part of hover covers mouseenter event*/
     /* "this" is the current element behing hovered*/
      var peopleClassSelectorString = '.' + $(this).data('office') ; 
      $people.not( peopleClassSelectorString).css({opacity: .5});        


},function(){
    /* this part of hover covers mouseleave event*/
    $people.css({opacity: 1});
})

编辑：就谷歌地图而言，您可以将数据绑定到可以使用标记 mouseenter/mouseleave 事件检索的地图标记对象。一旦你消化了人员和办公室类别的格式，你可能想要创建一个单独的问题，用谷歌地图标记，以了解如何将数据添加到标记并使用事件检索它。

第二次编辑：其实地图并不难，你可以使用谷歌地图的panTo( coordinates)方法。我为那些添加了额外的data-属性。

请参阅谷歌地图 API

于 2012-11-25T01:17:57.023 回答