javascript - 使用 jQuery 创建悬停和单击功能的精益方法到 SVG 目录映射

Question

我有一个包含大约 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/

Answer 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