Question

我正在学习一门很酷的JavaScript课程，名为＆＃34; Javascript Tutorial＆＃34;。视频说明显示了我没有发生的事情。应该发生的事情是点击带有logo HTML标记的图片以使其消失，然后点击一个按钮，其中显示＆＃34;获取徽标＆＃34;把它带回来。

以下是我在整个课程中构建的jstut.html文件的摘录：

＆＃13;

<!doctype html>
<html lan="en">
	<head>
		<meta charset="utf-8">
		<script src="jstut.js"></script>

		<style type="text/css">
		  body {font-size: 1.6em;}
		  .hidden {display:none;}
		  .show {display:inLine !important;}
		  button {
		  	border: 2px solid black; background: #ESE4E2;
		  	font-size: .5em; font-weight: bold; color: black;
		  	padding: .8em 2em;
		  	margin-top: .4em;
		  }
		</style>
	</head>
	<body>
		<img src="ntt-logo.png" id="logo">
		<button id="logoButton" type='text'>Get Logo</button>
	<script>
		document.getElementById('logoButton').onClick = function(event){
			document.getElementById('logo').className = "show";
		}

		document.getElementById('logo').onClick = function(event){
		  	document.getElementById('logo').className = "hidden";
		}		  
	</script>
	</body>
</html>

＆＃13;

我将我的语法与课程的语法进行了比较，这是完全匹配的。点击它后，请帮我把图像消失。

我正在使用Firefox。我尝试使用IE和Chrome，但它的行为方式相同。

Answer 1

您的代码与您提到的几乎的教程完全匹配。你有不同之处在于你一直在调用.onClick，你应该设置.onclick：

document.getElementById('logoButton').onclick = function(event) {
   document.getElementById('logo').className = "show";
}

document.getElementById('logo').onclick = function(event) {
    document.getElementById('logo').className = "hidden";
}

请注意properties are case sensitive in JavaScript。

＆＃13;

  document.getElementById('logoButton').onclick = function(event) {
    document.getElementById('logo').className = "show";
  }

  document.getElementById('logo').onclick = function(event) {
    document.getElementById('logo').className = "hidden";
  }

＆＃13;

body {
  font-size: 1.6em;
}
.hidden {
  display: none;
}
.show {
  display: inLine !important;
}
button {
  border: 2px solid black;
  background: #ESE4E2;
  font-size: .5em;
  font-weight: bold;
  color: black;
  padding: .8em 2em;
  margin-top: .4em;
}

＆＃13;

<img src="//placehold.it/200x200" id="logo">
<button id="logoButton" type='text'>Get Logo</button>

＆＃13;

Answer 2

在显示和隐藏元素之间切换的最佳方法是使用jQuery toggleClass函数。

＆＃13;

$('#logoButton').click(function() {
  $('#logo').toggleClass('hidden')
});

＆＃13;

body {
  font-size: 1.6em;
}
.hidden {
  display: none;
}
#logoButton {
  display: block;
  margin-bottom: 10px;
}
button {
  border: 2px solid black;
  background: #ESE4E2;
  font-size: .5em;
  font-weight: bold;
  color: black;
  padding: .8em 2em;
  margin-top: .4em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lan="en">

<head>
  <meta charset="utf-8">
  <script src="jstut.js"></script>


</head>

<body>
  <button id="logoButton" type='text'>Get Logo</button>
  <img src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg" id="logo">


</body>

</html>

＆＃13;

点击JavaScript即可使图像消失

2 个答案: