使用 jQuery 为 SVG 目录映射创建悬停和单击功能的精益方法答案

【问题标题】：Lean method to creating hover and click functionality with to an SVG directory map with jQuery使用 jQuery 为 SVG 目录映射创建悬停和单击功能的精益方法
【发布时间】：2016-09-21 22:31:41
【问题描述】：

我有一个包含大约 30-40 个列表的 SVG 目录映射。我已经为构成其中每个位置的路径添加了类。

这就是棘手的地方，

目标是为带有公司名称的每个列表提供工具提示悬停效果，当您单击它时，应将您带到相应的页面。

我可以为每一个都编写 jQuery，但必须有比编写 30 条不同的点击规则和 30 多个悬停更好的方法。

编辑：这是当前的处理方式：

$(".location-m1").hover(function(){
    $(".directory-m1").css("display", "block");
    $(".location-m1").css("opacity", ".7");
}, function(){
    $(".directory-m1").css("display", "none");
    $(".location-m1").css("opacity", "1");
});

https://jsfiddle.net/HeliumVideo/sepzgakr/1/

【问题讨论】：

标签： javascript jquery html css svg

【解决方案1】：

你可以写一些更加动态的东西，从悬停的元素中获取类名并使用它来访问其他元素等。

$(".location").on('mouseenter mouseleave', function(e) {
        var klasses = this.getAttribute('class').trim().split(/\s+/);
    var klass = klasses.filter(function(klass) {
        return klass.indexOf('location-') === 0;
    }).shift().split('-').pop();

    var disp = e.type === 'mouseenter' ? 'block' :  'none';
    var opaq = e.type === 'mouseenter' ? 0.7 : 1;

    $(".directory-" + klass).css("display", disp);
    $(".location-"  + klass).css("opacity", opaq);
});

FIDDLE

【讨论】：