Javascript：this和onClick

Question

我制作了一个简单的幻灯片，包含4张图片，点击后，它会显示在较大的div框中。非常自我解释，但随时问我任何问题。由于幻灯片只有4张图片，我会保留原样。但是，如果我有100多张照片怎么办？我认为为每个onclick事件复制和粘贴我的javascript函数不会像另一个解决方案那样干净。我的问题是如何制作javascript，以便每当我点击图像时，它就会在框中获取该图像并将其放入大容器中，并使我的代码更清晰。谢谢。

http://jsfiddle.net/jzhang172/p3Lg96p8/

＆＃13;

＆＃13;

Connection cnn =
       DriverManager.getConnection("jdbc:mysql:thin:@//192.68.11.128:1521/orcl", "Enter your database username", "Enter your database password");

＆＃13;

function clickFunction(){
  document.getElementById("big").style.backgroundImage="url('http://assets22.pokemon.com/assets/cms2/img/pokedex/full/007.png')";
  
}

function clickFunction2(){
  document.getElementById("big").style.backgroundImage="url('http://cdn.bulbagarden.net/upload/thumb/f/fb/143Snorlax.png/250px-143Snorlax.png')";
  
}
function clickFunction3(){
  document.getElementById("big").style.backgroundImage="url('http://img2.wikia.nocookie.net/__cb20140410200831/pokemon/images/0/02/025Pikachu_Dream.png')";
  
}
function clickFunction4(){
  document.getElementById("big").style.backgroundImage="url('http://pre03.deviantart.net/27f2/th/pre/f/2012/218/0/7/_004_charmander___1st_attempt_sugimori_style_by_white__flame-d59zqwh.png')";
  
}

＆＃13;

#container{
	border:solid 2px;
	width:1100px;
	height:600px;
   position:relative;
   overflow:hidden;
}

#big{
	
	border:solid 2px;
	border-color:blue;
	height:350px;
	background:gray;
	background-repeat:no-repeat;
	background-position:center;
}

.slides{
	text-align:center;
margin-top:30px;
border: solid 2px red;
height:200px;

}

.thumb{

	border:solid 2px green;
	width:260px;
	height:100%;
	margin:0px;
	display:inline-block;

}

.thumb img{
	width:100%;
	height:100%;
}



.thumb:hover{

	border:solid 4px red;

	}

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用一系列网址，这是一种更优雅的方式：

var urls = [
    "http://assets22.pokemon.com/assets/cms2/img/pokedex/full/007.png",
    "http://cdn.bulbagarden.net/upload/thumb/f/fb/143Snorlax.png/250px-143Snorlax.png",
    "http://img2.wikia.nocookie.net/__cb20140410200831/pokemon/images/0/02/025Pikachu_Dream.png",
    "http://pre03.deviantart.net/27f2/th/pre/f/2012/218/0/7/_004_charmander___1st_attempt_sugimori_style_by_white__flame-d59zqwh.png"
];

function clickFunction(num) {
    document.getElementById("big").style.backgroundImage = "url('" + urls[num] + "')";
}

然后，您可以将[{1}}，clickFunction(0)，clickFunction(1)等用于div clickFunction(2)。

或者您也可以自动化该部分：

onclick

Answer 2

您可以将url作为参数添加到onclick函数中：

function clickFunction(url) {
  document.getElementById("big").style.backgroundImage="url('"+ url + "')";
}

然后在你的HTML中传递

  <div class="thumb one" onclick="clickFunction(http://assets22.pokemon.com/assets/cms2/img/pokedex/full/007.png)">
    <img src="http://assets22.pokemon.com/assets/cms2/img/pokedex/full/007.png">
  </div>

Answer 3

由于您的所有功能基本相同，只是使用不同的URL，因此您应该使用参数。您可以传入URL，也可以将所有URL保留在数组中，然后传入一个能够识别正确URL的整数。