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

Lean method to creating hover and click functionality with to an SVG directory map with jQuery

本文关键字：映射 方法 SVG 创建 jQuery 悬停 功能 单击      更新时间：2023-09-26

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

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

$(".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);
});

小提琴

相关文章：