我有一张 map ，其中带有单独编号的设施，并标有一个点，当悬停或选择时，该点会改变颜色。选择后，单独容器中的文本会根据选择的设施更改内容。
我还有 map 下数字的图例。单击图例文本时，也会更改容器的文本内容。单独单击点或图例可以很好地更改悬停和选定的点或图例文本的颜色。
现在我尝试结合悬停在点上/单击点的效果来触发关联的图例文本悬停/被选中，反之亦然。
这是我第一次尝试 jQuery，所以请理解!我只参加了大约一天。尽可能多地阅读——这可能是一个简单的解决方案，但我没有看到它。我尝试创建一个新变量，将点和图例文本组合起来，并通过共享设施名称将它们链接起来，但这不起作用。我认为 on(绑定(bind))命令会将操作链接在一起，但这也不起作用。任何建议将不胜感激。提前致谢!
代码
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="map_container">
<a class="dot" style="left: 315px; top: 189px;" facility="bldg4" work="bldg4work"></a>
<a class="dot" style="left: 514px; top: 188px;" facility="bldg7" work="bldg7work"></a>
<div class="legend">
4. <a class="legt" facility="bldg4" work="bldg4work">Primary Clarifiers - West</a><br />
7. <a class="legt" facility="bldg7" work="bldg7work">Secondary Clarifiers</a><br />
</div>
</div>
<script>
$("a.dot, a.legt").on({click: function(){
$("a.dot").removeClass("selected");
$(this).addClass("selected");
$("a.legt").removeClass("selected");
$(this).addClass("selected");
var work = ".work_detail#" + $(this).attr("work");
var htmlCode = $(work).html();
$(".detail_container").fadeOut(500, function(){
$(".detail_container .work_detail").html(htmlCode);
$(".detail_container").fadeIn(500);
});
}
});
</script>
</body>
</html>
css
.map_container a.dot {
display: block;
height: 20px;
width: 20px;
background-image: url(../images/dots.png);
background-repeat: no-repeat;
background-position: 0px 0px;
cursor: pointer;
position: absolute;
}
.map_container a.dot:hover {
background-position: 0px -20px;
}
.map_container a.dot.selected {
background-position: 0px -40px;
}
.map_container a.legt {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #F00;
font-weight: bold;
text-decoration: none;
}
.map_container a.legt:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FF0;
font-weight: bold;
background-color: #630;
text-decoration: none;
}
.map_container a.legt.selected {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #0F0;
background-color: #630;
}
我尝试了这个悬停 - 我知道语法可能不正确，但我已经接近了吗？
$('a.dot[facility*]').hover(function(){
$('a.legt[facility*]').toggleClass('a.legt.hover');
});
最佳答案
如果您需要同时更改两个元素的悬停状态，那么您需要删除伪类 :hover 并让 jQuery 为您处理。我把你的 :hover 变成了 .hover 类。然后，在鼠标输入时，我将类应用于点，而图例和鼠标离开则从两者中删除该类。我用这个例子创建了一个 fiddle (必须改变点上的背景颜色才能看到它的工作，你可以删除该部分)。另外，对于自定义属性，您需要使用注释中提到的数据属性。这是 jsFiddle Example
HTML
<div class="map_container">
<a class="dot" style="left: 315px; top: 189px;" data-facility="bldg4" data-work="bldg4work"></a>
<a class="dot" style="left: 514px; top: 188px;" data-facility="bldg7" data-work="bldg7work"></a>
<div class="legend">
4. <a class="legt" data-facility="bldg4" data-work="bldg4work">Primary Clarifiers - West</a><br />
7. <a class="legt" data-facility="bldg7" data-work="bldg7work">Secondary Clarifiers</a><br />
</div>
</div>
jQuery
$('a.dot, a.legt').on({
mouseenter : function(){
var facility = $(this).data('facility');
$('a[data-facility='+facility+']').addClass("hover");
},
mouseleave : function(){
var facility = $(this).data('facility');
$('a[data-facility='+facility+']').removeClass("hover");
},
click: function() {
var $this = $(this),
facility = $this.data('facility'),
work = $this.data('work'),
htmlCode = $('.work_detail#'+work).html(),
$detailContainer = $('.detail_container');
$('a.dot, a.legt').removeClass('selected');
$('a[data-facility='+facility+']').addClass("selected");
$detailContainer.fadeOut(500, function() {
$detailContainer.find(".work_detail").html(htmlCode).end().fadeIn(500);
});
}
});
CSS
.map_container a.dot.hover {
background-position: 0px -20px;
}
.map_container a.legt.hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #FF0;
font-weight: bold;
background-color: #630;
text-decoration: none;
}
关于jQuery 绑定(bind)悬停和单击功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14058955/