Question

我有一个项目，用户单击某个国家的图像上方的不可见<a>标签，似乎用户正在单击该国家以访问另一个页面。尽管我创建的过程按预期进行，我认为这不是最有效的方法。

流程如下：

按下North America按钮时，它将通过以下jQuery代码显示三个新按钮：

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

nA1，nA2和nA3都是与按钮相对应的所有ID，默认情况下，由于{{1}中的.buttons类，这些按钮是隐藏的}：

lister.css

功能.buttons{ display: none; }还会生成一个画布，在该画布上显示更改的图像。画布和所有northAmerica标签位于<a>的{{1}}下，其ID为div，通过以下方式在c中引用：

map.js

这允许：

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

进行操作，其全部作用是使画布背景成为图像，在本例中为北美图片。

功能c.style.backgroundImage = "url('https://i.imgur.com/P8Eev1i.jpg')"; c.style.backgroundSize = "65em 45em"; c.style.display = "block";，nNorthAmerica和carribean在画布上的作用与cenAmerica相同。

现在，在不了解基本原理的情况下，我将演示用于创建“可点击的国家/地区”的方法-使我进入Stackoverflow的方法：

通过以下html代码创建了一个northAmerica标签：

<a>

在此示例中，让我们使用以下特定的<a href="wiki page on the country" class="hitbox" id="id-name"></a>标签：

<a>

因此，为了使<a href="https://en.wikipedia.org/wiki/Belize" class="hitbox" id="belize"></a>仅在功能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";上的国家

squares.css

问题来了：这是一种更有效的方法吗？

我每次都在做什么：

1）创建一个#belize{ width:5em; height: 10em; left:210px; top:1px; }标签 2）将<a>放入所需的功能 3）将idName.syle.display = "block";放在其他函数中 4）尝试通过CSS为标签找到正确的位置 5）重复

我必须有一种我看不到的更有效的编码方法。这没有提到大多数国家/地区的大小都需要多个idName.syle.display = "none";标记才能填充的事实。真正快速地堆积了很多混乱的代码。但是，我想不出另一种更快的过程我正在寻求这方面的帮助

道歉，这是一个令人惊奇的长问题，但我想尽可能地讲清楚。非常感谢您的宝贵时间。

<a>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta  name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Map</title>
        <link rel="stylesheet" href="lister.css">
        <link rel="stylesheet" href="squares.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="map.js"></script>
    </head>
<body>
    <h1>Where do you wanna go?</h1>
    <h3>All sub-divisions are based not by cultural or political divisions, rather strictly geographical definitions.</h3>

    <table>
<!--North America-->
        <tr>
            <td><button onclick="northAmerica()">North America</button></td>
        </tr>

        <td><button id="nA1" class="buttons" onclick="nNorthAmerica()">Northern North America</button></td>
        <td><button id="nA2" class="buttons" onclick="carribean()">Carribean</button></td>
        <td><button id="nA3" class="buttons" onclick="cenAmerica()">Central America</button></td>
</table>
    <div id="c">
        <td><canvas></canvas></td>
<!--Central America hitboxes-->
        <!--Belize-->
        <a href="https://en.wikipedia.org/wiki/Belize" class="hitbox" id="belize"></a>
        <!--Guatemala-->
        <a href="https://en.wikipedia.org/wiki/Guatemala" class="hitbox" id="guatemalaTop"></a>
        <a href="https://en.wikipedia.org/wiki/Guatemala" class="hitbox" id="guatemalaTriangle"></a>
        <a href="https://en.wikipedia.org/wiki/Guatemala" class="hitbox" id="guatemalaMain"></a>
        <a href="https://en.wikipedia.org/wiki/Guatemala" class="hitbox" id="guatemalaSlip"></a>
        <a href="https://en.wikipedia.org/wiki/Guatemala" class="hitbox" id="guatemalaHedge"></a>
    </div>

</body>
</html>

lister.css

//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";

}

squares.css

button{
    width:10em;
    height:5em;
    font:sans-serif;
}
.buttons{
    display: none;
}
/* North America */
.hitbox{
    display:none;
    position: absolute;
    border:1px solid black;
}
#c{
    display:none;
    position: relative;
    border:1px solid black;
    width:65em;
    height:45em;
}

为便于理解，这里是该项目的小规模演示，仅包括危地马拉（在“中美洲”分部下）及其/*Central America*/ #belize{ width:5em; height: 10em; left:210px; top:1px; } #guatemalaTop{ width:7em; height:6.1em; left:9.5%; bottom:80%; } #guatemalaTriangle{ width:3em; height:2em; bottom:86.5%; left:6%; } #guatemalaMain{ width:10em; height:9em; transform: rotate(30deg); left:3%; bottom: :2%; } #guatemalaSlip{ height:7em; width:5em; left:12%; bottom:70%; transform: rotate(340deg); } #guatemalaHedge{ width:6em; height: 5em; left:14%; transform: rotate(320deg); }标签标记的国家。我希望看到实际的代码可以使人们更容易理解为什么我希望有一种更有效的方法，特别是在<a>中。谢谢。 https://plnkr.co/edit/D7Rzq0loF4AOyJQTnxou?p=preview

Answer 1

我不会为此使用HTML元素。过于复杂的点击区域和太多的图形化内容。矩形元素不足以覆盖热点。

如果您真的对以可扩展，可扩展并最终可维护的方式执行此操作感兴趣，请使用JavaScript游戏引擎。他们已经为您处理了SVG / Canvas渲染，加载和交互事件，并为这类繁重的UI应用程序提供了一个框架。其中一些是：

Phaser
Pixi.js
Crafty.js（我用这个做了一个完整的移动视频游戏）
Babylon.js

...还有一大堆等等

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

一些例子是：

D3
Raphael
Paper.js
等（谷歌“ javascript矢量图形框架”）

这些库为您提供了更多的图形控制方式，但较难掌握，对于您的应用程序可能功能强大。

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

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

停止硬编码按钮，当您击中几百个ID后，它将变成一个丑陋的怪物。取而代之的是，将带有坐标和元数据的SVG URL存储在JSON中（可能是树状结构），并动态或动态地生成所有内容，或者使用递归函数。

创建此javascript和CSS重项目的最有效方法是什么？

1 个答案: