1

我有一张带有单独编号设施的地图，上面标有一个点，当悬停或选择时会改变颜色。选择后，单独容器中的文本会根据选择的设施更改内容。

我还有一个关于地图下数字的图例。单击图例文本时，它也会更改容器的文本内容。单独单击点或图例可以很好地更改悬停和选定的点或图例文本的颜色。

现在我正在尝试结合悬停/单击点以触发关联的图例文本悬停/成为选中的效果，反之亦然。

这是我第一次尝试 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');
    });
4

2 回答 2

2

如果您需要同时更改两个元素的悬停状态，则需要删除伪类 :hover 并让 jQuery 为您处理。我把你的 :hover 变成了一个 .hover 类。然后在鼠标输入时，我将类应用于点和图例，然后鼠标离开，从两者中删除类。我用这个例子创建了一个小提琴（必须改变点上的背景颜色才能看到它的工作，你可以删除那部分）。此外，对于自定义属性，您需要使用注释中提到的 data- 属性。这是一个jsFiddle 示例

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;
}
于 2012-12-27T19:22:12.003 回答
1

假设您需要 bldg 作为设施属性的起始值。您还必须将 href 添加到您的锚点，并为锚点标签添加文本。

现场演示

 $('a.dot[facility^=bldg]').hover(function(){
    $('a.legt[facility^=bldg]').toggleClass('a.legt.hover');
 });
于 2012-12-27T17:54:14.960 回答