Javascript and/or 过度拥挤导致点击变得不稳定？

Question

好的，这对我来说是新的。我已经使用 Javascript 多年，但从未运行解决过这个问题，但话又说回来，我以前从未在单个页面上使用过这么多（附近没有）。

我正在为我的公司创建分销商地图，这样公司就可以点击任何一家公司，然后会弹出显示其位置的标记。那工作正常。但是，当您单击标记时，它应该会为您提供更详细的信息（公司名称和位置）。那工作正常。对于标记和文本，我使用 javascript 来切换 show/hide。然而，在我添加了大约 10 个标记之后，我注意到一些标记停止工作了——尽管我在制作每个标记后都进行了测试，并且自测试以来没有改变任何东西。我添加的越多，它似乎变得越不稳定。 javascript 是否有内存限制或其他限制（我到底是怎么把它从那里最大化的？我知道这可能是胡说八道 - 我完全迷失了 atm）。

其他奇怪的事情 - 相同的标记在所有浏览器中停止工作。为了弥补任何意外更改，我将代码从一个有效的标记复制并粘贴到一个无效的标记，然后只更改值。之前工作的那个仍然工作，之前坏掉的那个仍然不工作。我正在粘贴下面的代码。任何帮助将不胜感激。

PS - 我删除了大部分空白标记（大约 18 个）。如果此代码没有为您复制问题，您可以将它们添加回来。

编辑：PPS - 这不是元素相互覆盖 - 有时不起作用的标记本身位于岛屿上，附近没有其他东西。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Distributor Map for X</title>
<link rel="stylesheet" type="text/css" href="distributor.css">
<script src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="company1_check"){
            $(".company1").toggle();
        }
        if($(this).attr("value")=="company2_check"){
            $(".company2").toggle();
        }
        if($(this).attr("value")=="company3_check"){
            $(".company3").toggle();
        }
        if($(this).attr("value")=="company4_check"){
            $(".company4").toggle();
        }
        if($(this).attr("value")=="company5_check"){
            $(".company5").toggle();
        }
    });
});
</script>
</head>
<body>
<div id="containerdiv" style="width:1200px; margin-left:auto; margin-right:auto;">
<div id="header">
<h1 style="text-align:center;">
    Distributor Map
</h1>
<h2 style="text-align:center;">
    For X
</h2>
<p style="font-weight:bold; text-align:center;">
    Select the map(s) for the company whose distributors you wish to see.
</p>
<p style="text-align:center;">
<span style="font-weight:bold;">company1:<input value="company1_check" type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight:bold;">company2:<input value="company2_check" type="checkbox" onclick="toggle_visibility(company2_map)">&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight:bold;">company3:<input value="company3_check" type="checkbox" onclick="toggle_visibility(company3_map)">&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight:bold;">company4:<input value="company4_check" type="checkbox" onclick="toggle_visibility(company4_map)">&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight:bold;">company5:<input value="company5_check" type="checkbox" onclick="toggle_visibility(company5)">&nbsp;&nbsp;&nbsp;&nbsp;
</p>
</div>
<div id="map" class="maps" style="width:1200px; z-index:1;">
    <img src="images/base_map.png" alt="map" />
</div>
<!--Begin company1 Distributors-->
<div class="company1" style="z-index:6; display:none;">
    <div class="company1" style="z-index:11; display:none; margin-left:870px; margin-top:190px;">
    <a onclick="$('.company1_china_info').toggle()" href="#" id="company1_ch"><img id="company1_china" src="images/company1/company1_aus.png" alt="Beijing" ></a>
    <p class="company1_china_info" style="color:#000; width:auto; display:none; margin-top:-90px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Beijing SCR Instruments LTD</span><br />
    <span style="background-color:#fff;">company1 Distributor in China</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:865px; margin-top:235px;">
    <a onclick="$('.company1_hongkong_info').toggle()" href="#" id="company1_hongkong"><img id="company1_hongkong" src="images/company1/company1_aus.png" alt="Hong Kong" ></a>
    <p class="company1_hongkong_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Fugro Geotechnical Services LTD</span><br />
    <span style="background-color:#fff;">company1 Distributor in Hong Kong</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:562px; margin-top:162px;">
    <a onclick="$('.company1_italy_info').toggle()" href="#" id="company1_italy"><img id="company1_italy"src="images/company1/company1_aus.png" alt="Italy" ></a>
    <p class="company1_italy_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:30px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;"> Belotti Sistemi S.a.s.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Italy</span>
    </p>
    </div>
    <div class="company1" style="z-index:12; display:none; margin-left:824px; margin-top:265px;">
    <a onclick="$('.company1_malaysia_info').toggle()" href="#" id="company1_malaysia"><img id="company1_malaysia" src="images/company1/company1_aus.png" alt="Malaysia" ></a>
    <p class="company1_malaysia_info" style="color:#000; width:auto; display:none; margin-top:-60px; margin-left:-250px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">CE Instruments SDN. BHD.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Malaysia</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:834px; margin-top:290px;">
    <a onclick="$('.company1_singapore_info').toggle()" href="#" id="company1_sing"><img id="company1_singapore"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_singapore_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:-150px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">CEP Services PTE LTD / Fugru Singapore PTE LTD</span><br />
    <span style="background-color:#fff;">company1 Distributors in Brunei (CEP) and Singapore (Fugro) </span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:310px; margin-top:355px;">
    <a onclick="$('.company1_peru_info').toggle()" href="#" id="company1_peru"><img id="company1_peru"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_peru_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Corporacion Geotecnica Peru EIRL</span><br />
    <span style="background-color:#fff;">company1 Distributor in Peru</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:510px; margin-top:172px;">
    <a onclick="$('.company1_spain_info').toggle()" href="#" id="company1_spain"><img id="company1_spain"src="images/company1/company1_aus.png" alt="Spain" ></a>
    <p class="company1_spain_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Distribuciones Pako</span><br />
    <span style="background-color:#fff;">company1 Distributor in Spain</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:905px; margin-top:190px;">
    <a onclick="$('.company1_sk_info').toggle()" href="#" id="company1_sk"><img id="company1_southkorea" src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_sk_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Dong-A Geovan Co., Ltd</span><br />
    <span style="background-color:#fff;">company1 Distributor in South Korea</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:890px; margin-top:250px;">
    <a onclick="$('.company1_philippines_info').toggle()" href="#" id="company1_phil"><img id="company1_philippines"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_philippines_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Drilling Advisory & Logistics</span><br />
    <span style="background-color:#fff;">company1 Distributor in The Philippines</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:260px; margin-top:250px;">
    <a onclick="$('.company1_mexico_info').toggle()" href="#" id="company1_mex"><img id="company1_mexico"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_mexico_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Enlace Tecnico</span><br />
    <span style="background-color:#fff;">company1 Distributor in Mexico</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:535px; margin-top:135px;">
    <a onclick="$('.company1_uk_info').toggle()" href="#" id="company1_uk"><img id="company1_uk"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_uk_info" style="color:#000; width:auto; display:none; margin-top:-80px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Gage Technique International</span><br />
    <span style="background-color:#fff;">company1 Distributor in the United Kingdom</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:330px; margin-top:175px;">
    <a onclick="$('.company1_canada_info').toggle()" href="#" id="company1_can"><img id="company1_canada"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_canada_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Geneq Inc.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Canada</span>
    </p>
    </div>
    <div class="company1" style="z-index:11; display:none; margin-left:540px; margin-top:172px;">
    <a onclick="$('.company1_barca_info').toggle()" href="#" id="company1_barca"><img id="company1_barca"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_barca_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">GeoMed Projectes, S.L.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Barcelona, Spain</span>
    </p>
    </div>
</div>
<!--Begin company2 Distributors-->
<div class="company2" style="z-index:5; display:none;">
    <div class="company2" style="z-index:5; display:none; margin-left:570px; margin-top:210px;">
    <a onclick="$('.company2_random_info').toggle()" href="#" id="company1_ch"><img id="company2_test"src="images/company2/company2_marker.png" alt="Somewhere" ></a>
    <p class="company2_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
    <span style="background-color:#fff;">company2 Distributor in Someplace, Somewhere</span>
    </p>
    </div>
</div>
<!--Begin company 3 Distributors-->
<div class="company3" style="z-index:4; display:none;">
    <div class="company3" style="z-index:4; display:none; margin-left:270px; margin-top:260px;">
    <a onclick="$('.company3_random_info').toggle()" href="#" id="company1_ch"><img id="company3_test" src="images/company3/company3_marker.png" alt="Somewhere" ></a>
    <p class="company3_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
    <span style="background-color:#fff;">company3 Instruments Distributor in Someplace, Somewhere</span>
    </p>
    </div>
</div>
<!--Begin company4 Distributors-->
<div class="company4" style="z-index:3; display:none;">
    <div class="company4" style="z-index:3; display:none; margin-left:270px; margin-top:160px;">
    <a onclick="$('.company4_random_info').toggle()" href="#" id="company1_ch"><img id="company4_test" src="images/company4/company4_marker.png" alt="Somewhere" ></a>
    <p class="company4_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
    <span style="background-color:#fff;">company4 Distributor in Someplace, Somewhere</span>
    </p>
    </div>
</div>
<!--Begin company5 Distributors-->
<div class="company5" style="z-index:2; display:none;">
    <div class="company5" style="z-index:2; display:none; margin-left:870px; margin-top:90px;">
    <a onclick="$('.company5_random_info').toggle()" href="#" id="company1_ch"><img id="company5_test" src="images/company5/company5_marker.png" alt="Somewhere" ></a>
    <p class="company5_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
    <span style="background-color:#fff;">company5 Distributor in Someplace, Somewhere</span>
    </p>
    </div>
</div>
</div>
</body>
</html>

编辑：CSS 链接的页面

div.maps {position:absolute; top:300;}
div.company1 {position:absolute;top:300;width:100%;}
img.company1_aus {position:absolute;top:400;left:750;}
p.company1_china_info {position:absolute;top:200;left:870;}
div.company2 {position:absolute; top:300; width:100%;}
p.company2_random_info {position:absolute; top:200; left:570;}
div.company3 {position:absolute; top:300; width:100%;}
div.company4 {position:absolute; top:300; width:100%;}
div.company5 {position:absolute; top:300; width:100%;}

Answer 1

将内部 div 的 class 更改为其他内容：

<div class="company1" style="z-index:6; display:none;">
    <div class="company1-1" style="z-index:11; display:none; margin-left:870px; margin-top:190px;">
    <a onclick="$('.company1_china_info').toggle()" href="#" id="company1_ch"><img id="company1_china" src="images/company1/company1_aus.png" alt="Beijing" ></a>
    <p class="company1_china_info" style="color:#000; width:auto; display:none; margin-top:-90px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Beijing SCR Instruments LTD</span><br />
    <span style="background-color:#fff;">company1 Distributor in China</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:865px; margin-top:235px;">
    <a onclick="$('.company1_hongkong_info').toggle()" href="#" id="company1_hongkong"><img id="company1_hongkong" src="images/company1/company1_aus.png" alt="Hong Kong" ></a>
    <p class="company1_hongkong_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Fugro Geotechnical Services LTD</span><br />
    <span style="background-color:#fff;">company1 Distributor in Hong Kong</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:562px; margin-top:162px;">
    <a onclick="$('.company1_italy_info').toggle()" href="#" id="company1_italy"><img id="company1_italy"src="images/company1/company1_aus.png" alt="Italy" ></a>
    <p class="company1_italy_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:30px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;"> Belotti Sistemi S.a.s.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Italy</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:12; display:none; margin-left:824px; margin-top:265px;">
    <a onclick="$('.company1_malaysia_info').toggle()" href="#" id="company1_malaysia"><img id="company1_malaysia" src="images/company1/company1_aus.png" alt="Malaysia" ></a>
    <p class="company1_malaysia_info" style="color:#000; width:auto; display:none; margin-top:-60px; margin-left:-250px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">CE Instruments SDN. BHD.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Malaysia</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:834px; margin-top:290px;">
    <a onclick="$('.company1_singapore_info').toggle()" href="#" id="company1_sing"><img id="company1_singapore"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_singapore_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:-150px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">CEP Services PTE LTD / Fugru Singapore PTE LTD</span><br />
    <span style="background-color:#fff;">company1 Distributors in Brunei (CEP) and Singapore (Fugro) </span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:310px; margin-top:355px;">
    <a onclick="$('.company1_peru_info').toggle()" href="#" id="company1_peru"><img id="company1_peru"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_peru_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Corporacion Geotecnica Peru EIRL</span><br />
    <span style="background-color:#fff;">company1 Distributor in Peru</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:510px; margin-top:172px;">
    <a onclick="$('.company1_spain_info').toggle()" href="#" id="company1_spain"><img id="company1_spain"src="images/company1/company1_aus.png" alt="Spain" ></a>
    <p class="company1_spain_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Distribuciones Pako</span><br />
    <span style="background-color:#fff;">company1 Distributor in Spain</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:905px; margin-top:190px;">
    <a onclick="$('.company1_sk_info').toggle()" href="#" id="company1_sk"><img id="company1_southkorea" src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_sk_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Dong-A Geovan Co., Ltd</span><br />
    <span style="background-color:#fff;">company1 Distributor in South Korea</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:890px; margin-top:250px;">
    <a onclick="$('.company1_philippines_info').toggle()" href="#" id="company1_phil"><img id="company1_philippines"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_philippines_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Drilling Advisory & Logistics</span><br />
    <span style="background-color:#fff;">company1 Distributor in The Philippines</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:260px; margin-top:250px;">
    <a onclick="$('.company1_mexico_info').toggle()" href="#" id="company1_mex"><img id="company1_mexico"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_mexico_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Enlace Tecnico</span><br />
    <span style="background-color:#fff;">company1 Distributor in Mexico</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:535px; margin-top:135px;">
    <a onclick="$('.company1_uk_info').toggle()" href="#" id="company1_uk"><img id="company1_uk"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_uk_info" style="color:#000; width:auto; display:none; margin-top:-80px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Gage Technique International</span><br />
    <span style="background-color:#fff;">company1 Distributor in the United Kingdom</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:330px; margin-top:175px;">
    <a onclick="$('.company1_canada_info').toggle()" href="#" id="company1_can"><img id="company1_canada"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_canada_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">Geneq Inc.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Canada</span>
    </p>
    </div>
    <div class="company1-1" style="z-index:11; display:none; margin-left:540px; margin-top:172px;">
    <a onclick="$('.company1_barca_info').toggle()" href="#" id="company1_barca"><img id="company1_barca"src="images/company1/company1_aus.png" alt="" ></a>
    <p class="company1_barca_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
    <span style="text-decoration:underline; background-color:#fff;">GeoMed Projectes, S.L.</span><br />
    <span style="background-color:#fff;">company1 Distributor in Barcelona, Spain</span>
    </p>
    </div>
</div>

将此添加到您的 css 文件中：

div.company1-1 {position:absolute;}

Javascript:

    if($(this).attr("value")=="company1_check"){
        $(".company1").toggle();
        $(".company1-1").toggle();
    }

您还应该关闭 span 标签并摆脱 onclick toggle_visibility()，如下所示：

<span style="font-weight:bold;">company1:<input value="company1_check" type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="font-weight:bold;">company2:<input value="company2_check" type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="font-weight:bold;">company3:<input value="company3_check" type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="font-weight:bold;">company4:<input value="company4_check" type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span style="font-weight:bold;">company5:<input value="company5_check" type="checkbox">&nbsp;&nbsp;&nbsp;&nbsp;</span>

Javascript and/or 过度拥挤导致点击变得不稳定？

Javascript and/or clicks becoming unstable from overcrowding?

javascript

css

hyperlink

show-hide

memory-limit