创建这个javascript和css繁重的项目最有效的方法是什么？

我有一个项目，用户在其中单击“不可见”

对于这个例子，让我们使用这个特定的

因此，为了使

belize

仅在功能

cenAmerica

激活时显示，并在按下另一个按钮时停止存在，我必须执行以下操作：

function cenAmerica() {
  c.style.backgroundImage = "url('https://i.imgur.com/DYh2sMR.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";
  //SHOWS
  belize.style.display = "block";

因此，这意味着我必须在其他两个函数中添加这一行：

belize.style.display = "none";

最后，把它放在画布的背景图像上，这样看起来就像你在

方格中按国家一样。css

伯利兹{ 宽度：5em； 高度：10公分； 左：210像素； 顶部：1px； } 问题来了：有没有更有效的方法？

我每次都在做的是：

1） 创建一个

lister.css

按钮{
宽度：10em；
身高：5公分；
字体：无衬线；
}
.按钮{
显示：无；
}
/*北美*/
.hitbox{
显示：无；
位置：绝对位置；
边框：1px纯黑；
}
#c{
显示：无；
位置：相对位置；
边框：1px纯黑；
宽度：65em；
高度：45em；
}

squares.css

/*中美洲*/
#伯利兹{
宽度：5em；
高度：10公分；
左：210像素；
顶部：1px；
}
#危地马拉阿拉托普{
宽度：7em；
高度：6.1米；
左：9.5%；
底部：80%；
}
#危地马拉三角洲{
宽度：3em；
高度：2米；
底部：86.5%；
左：6%；
}
#危地马拉{
宽度：10em；
高度：9公分；
变换：旋转（30度）；
左：3%；
底部：2%；
}
#危地马拉阿拉斯利普{
高度：7公分；
宽度：5em；
左：12%；
底部：70%；
变换：旋转（340度）；
}
#危地马拉树篱{
宽度：6em；
身高：5公分；
左：14%；
变换：旋转（320度）；
}

---

为了便于理解，这里简单介绍了该项目的一个小规模演示，仅包括危地马拉（在“中美洲”子分部下）及其

我不会为此使用HTML元素。太复杂的点击区域和太多的图形。矩形元素不适合重叠的热点

如果您真的对以一种可伸缩、可扩展并最终可维护的方式进行此操作感兴趣，请使用JavaScript游戏引擎。它们已经为您处理了SVG/Canvas呈现、加载和交互事件，并为这类繁重的UI应用程序提供了一个框架思想。其中包括：




（我用这个做了一个完整的手机视频游戏）


…和一个大的等等

如果这是数据科学/GIS方向，您可能更喜欢的另一种方法是使用数据可视化框架。这种方法可能更复杂一些，您可能需要学习更多，但可能更适合您的兴趣

例如：





等等（谷歌“javascript矢量图形框架”）

这些库为您提供了对图形的更多控制，但有点难以掌握，并且对于您的应用程序来说可能太强大了

通常，这些库还将处理多浏览器渲染问题、事件处理，甚至移动设备支持（触摸事件等）。少花时间处理无聊的事情会让你专注于制作更好的产品

另外，将JSON数据结构制作成数据库，以便从单个数据源自动生成所有UI。这将为使用API调用构建UI铺平道路

停止硬编码按钮，当你点击几百个ID后，它将变成一个丑陋的怪物。相反，将带有坐标和元数据的SVG URL存储在JSON中（可能是树结构），并动态生成所有内容，可以是动态生成，也可以是递归函数生成

  c.style.backgroundImage = "url('https://i.imgur.com/P8Eev1i.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";

function cenAmerica() {
  c.style.backgroundImage = "url('https://i.imgur.com/DYh2sMR.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";
  //SHOWS
  belize.style.display = "block";

belize.style.display = "none";

//NORTH AMERICA
function northAmerica() {

  var c = document.getElementById("c");

  let nA1 = document.getElementById("nA1");
  let nA2 = document.getElementById("nA2");
  let nA3 = document.getElementById("nA3");

//show blocks
$([nA1, nA2, nA3]).each(function(){
    $(this).css({ 'display' : 'block'});
  });

  c.style.backgroundImage = "url('https://i.imgur.com/P8Eev1i.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";

}

function nNorthAmerica() {
  c.style.backgroundImage = "url('https://i.imgur.com/1TodCjG.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";
  //HIDES
  belize.style.display = "none";
  belize.style.display = "none";
  guatemalaTop.style.display = "none";
  guatemalaTriangle.style.display = "none";
  guatemalaMain.style.display = "none";
  guatemalaSlip.style.display = "none";
  guatemalaHedge.style.display = "none";
}

function carribean() {
  c.style.backgroundImage = "url('https://i.imgur.com/7d1VrFw.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";
  //HIDES
  belize.style.display = "none";
  belize.style.display = "none";
  guatemalaTop.style.display = "none";
  guatemalaTriangle.style.display = "none";
  guatemalaMain.style.display = "none";
  guatemalaSlip.style.display = "none";
  guatemalaHedge.style.display = "none";
}

function cenAmerica() {
  c.style.backgroundImage = "url('https://i.imgur.com/DYh2sMR.jpg')";
  c.style.backgroundSize = "65em 45em";
  c.style.display = "block";
  //SHOWS
  belize.style.display = "block";
  guatemalaTop.style.display = "block";
  guatemalaTriangle.style.display = "block";
  guatemalaMain.style.display = "block";
  guatemalaSlip.style.display = "block";
  guatemalaHedge.style.display = "block";

}