Question

我一直在尝试构建一个非常简单的网站，该网站会提取信息卡，以响应用户点击UI中显示的建筑物并在用户点击指南针时摆脱该卡片img在角落里。该代码应用两个不同的CSS类来使卡出现和消失。我能够使addEventListener在建筑物和指南针上工作，但它只能工作一次。换句话说，在点击建筑物一次后，卡片出现，然后在点击指南针后消失。但是，在前两个之后的任何进一步点击似乎都没有注册。至少，卡片不再出现和消失。

这看起来很简单，但我还没弄清楚为什么这些按钮只能工作一次。

我一直在SublimeText中写作并在浏览器中查看该网站。如果您对发生这种情况的原因有任何想法，请告诉我们？！

＆＃13;

//stores marker as variable
var wsc = document.getElementById("wsc");
//stores event function
var onBuildingClick = function() {
	document.getElementById("_wsc").classList.add("card");
}
//adds event listener to marker
wsc.addEventListener("click", onBuildingClick);



//////////////////////////////////


//stores compass as a variable
var compass = document.getElementById("compass_img");
//stores event function
var onCompassClick = function() {
	document.getElementById("_wsc").classList.add("_card");
}
//adds event listener to compass
compass.addEventListener("click", onCompassClick);

＆＃13;

.card {
	position: absolute;
	background-color: white;
	width: 60%;
	height: 60%;
	left: 20%;
	top: 20%;
}
._card {
	display: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="byu_richmap.css">

<title>byu_richmap</title>
</head>

<body>
	<div class="campus_map">
		<img id="campus_img" src="BYUmap_simple.png">
		<div id="wsc" class="identifier"></div>
		<div id="hbll" class="identifier"></div>
		<div id="hfac" class="identifier"></div>
		<div id="moa" class="identifier"></div>
		<div id="asb" class="identifier"></div>
		<div id="jkb" class="identifier"></div>
		<div id="tmcb" class="identifier"></div>
		<div id="jfsb" class="identifier"></div>
		<div id="swkt" class="identifier"></div>
		<div id="esc" class="identifier"></div>
		<div id="kc" class="identifier"></div>
		<div id="marb" class="identifier"></div>
		<div id="cb" class="identifier"></div>
		<div id="ctb" class="identifier"></div>
		<div id="lsb" class="identifier"></div>
		<div id="brwb" class="identifier"></div>
		<div id="snlb" class="identifier"></div>
		<div id="rotc" class="identifier"></div>
		<div id="jrcb" class="identifier"></div>
		<div id="mlbm" class="identifier"></div>
		<div id="mc" class="identifier"></div>
		<div id="hc" class="identifier"></div>
		<div id="tnrb" class="identifier"></div>
		<div id="bnsb" class="identifier"></div>
		<div id="hgb" class="identifier"></div>
		<div id="msrb" class="identifier"></div>
		<div id="brmb" class="identifier"></div>
		<div id="mckb" class="identifier"></div>
		<div id="rb" class="identifier"></div>
		<div id="lves" class="identifier"></div>
		<div id="canc" class="identifier"></div>
		<div id="sab" class="identifier"></div>
		<div id="sfh" class="identifier"></div>

		<div id="_wsc" class="cards"></div>
		<!--<div id="_hbll" class="card"></div>
		<div id="_hfac" class="card"></div>
		<div id="_moa" class="card"></div>
		<div id="_asb" class="card"></div>
		<div id="_jkb" class="card"></div>
		<div id="_tmcb" class="card"></div>
		<div id="_jfsb" class="card"></div>
		<div id="_swkt" class="card"></div>
		<div id="_esc" class="card"></div>
		<div id="_kc" class="card"></div>
		<div id="_marb" class="card"></div>
		<div id="_cb" class="card"></div>
		<div id="_ctb" class="card"></div>
		<div id="_lsb" class="card"></div>
		<div id="_brwb" class="card"></div>
		<div id="_snlb" class="card"></div>
		<div id="_rotc" class="card"></div>
		<div id="_jrcb" class="card"></div>
		<div id="_mlbm" class="card"></div>
		<div id="_mc" class="card"></div>
		<div id="_hc" class="card"></div>
		<div id="_tnrb" class="card"></div>
		<div id="_bnsb" class="card"></div>
		<div id="_hgb" class="card"></div>
		<div id="_msrb" class="card"></div>
		<div id="_brmb" class="card"></div>
		<div id="_mckb" class="card"></div>
		<div id="_rb" class="card"></div>
		<div id="_lves" class="card"></div>
		<div id="_canc" class="card"></div>
		<div id="_sab" class="card"></div>
		<div id="_sfh" class="card"></div>-->
	</div>
	<div class="compass">
		<img id="compass_img" src="byu_richmap_compass.png">
	</div>

<script src="byu_richmap.js"></script>	
</body>

</html>

＆＃13;

Answer 1

你没有清除使其不可见的_card风格。您的代码工作正常

var onBuildingClick = function() {
  document.getElementById("_wsc").classList.add("card");    
  document.getElementById("_wsc").classList.remove("_card");
}

也在这里。

var onCompassClick = function() {
  document.getElementById("_wsc").classList.add("_card");
  document.getElementById("_wsc").classList.remove("card");
}

Fiddle

Answer 2

记住一个元素可以有多个类。

您点击了该建筑物，系统会调用.addClass('card')，现在#_wsc的课程为card。

点击指南针，调用.addClass('_card')，然后#_wsc有card _card类。

您再次点击该建筑物，并调用.addClass('card')，但它已经有card类，所以没有任何反应。

听起来好像您希望.addClass('_card') 将card替换为_card .card { display: none; } .visible { display: block; } var onBuildingClick = function () { document.getElementById("_wsc").classList.add("visible"); } var onCompassClick = function () { document.getElementById("_wsc").classList.remove("visible"); }，但事实并非如此。

这个怎么样：

ClientScopes

Answer 3

首次执行onCompassClick时会添加display:none，但在连续点击时不会删除_card。删除课程var onBuildingClick = function() { document.getElementById("_wsc").classList.remove("_card"); document.getElementById("_wsc").classList.add("card"); }以显示信息卡再一次。

mysql -u root -p

Javascript addEventListener只运行一次

3 个答案: