<分区>
标签 javascript jquery html css
<分区>
我正在努力提高我的编码技能并开始学习 jquery。我从简单的事情开始，比如制作一个非常简单的图像展示柜。这是我到目前为止编写的代码。但它似乎太长而且效率不高。有什么办法可以改进吗？
HTML:
<div id="galerija">
<div style="float: left; border: 1px solid red; width: 600px; height: 450px;background-image: url(images/gora_big_main.png);" class="big_image"></div>
<div style="float:left;"id="trumbai">
<div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_1.png);"class="trumb_1"></div>
<div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_2.png);"class="trumb_2"></div>
<div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_2.png);"class="trumb_3"></div>
<div style="border: 1px solid red; cursor: pointer; width: 150px; height: 75px; background-image: url(images/gora_trumb_main.png);"class="main_trumb"></div>
</div>
</div>
JS
<script type="text/javascript">
$(function(){
$(".trumb_1").click(function(){
$(".big_image").css("background-image","url('images/gora_big_1.png')");
});
});
$(function(){
$(".trumb_2").click(function(){
$(".big_image").css("background-image","url('images/gora_big_2.png')");
});
});
$(function(){
$(".trumb_3").click(function(){
$(".big_image").css("background-image","url('images/gora_big_3.png')");
});
});
$(function(){
$(".main_trumb").click(function(){
$(".big_image").css("background-image","url('images/gora_big_main.png')");
});
});
</script>
最佳答案
将您的样式分离到一个链接的 css 文件中，这样您就不会在 HTML 中有太多重复的样式:
HTML:
<div id="galerija">
<div id="big_image"></div>
<div id="trumbai">
<div id="t1" "class="trumb"></div>
<div id="t2" "class="trumb"></div>
<div id="t3" "class="trumb"></div>
<div id="tmain" "class="trumb"></div>
</div>
</div>
一个好的经验法则是，如果您可以在 HTML 中找到“style=”，则说明您的内联样式过多。
CSS:
#big_image
{
float: left;
border: 1px solid red;
width: 600px; height:
450px;background-image: url(images/gora_big_main.png);
}
#t1 {background-image: url(images/gora_trumb_1.png);}
#t2 {background-image: url(images/gora_trumb_2.png);}
#t3 {background-image: url(images/gora_trumb_3.png);}
#tmain {background-image: url(images/gora_trumb_main.png);}
#trumbai {float:left;}
.trumb //<--- notice how ALL of the styling for all class="trumb" is set in one place!
{
border: 1px solid red;
cursor: pointer;
width: 150px;
height: 75px;
}
在 JavaScript 中使用变量:
imageClick("#t1", "gora_big_1")
imageClick("#t2", "gora_big_2")
imageClick("#t3", "gora_big_3")
imageClick("#tmain", "gora_big_main")
function imageClick(id, imageName)
{
$(function(){
$("").click(function(){
$(id).css("background-image","url('images/' + imageName + '.png')");
});
});
}
请注意，我将 imageClick() 设为一个非常通用的函数，以便它可以在其他地方重复使用。我以 id 作为参数调用函数，并将 id 完全排除在函数之外。一个代码块可以无限循环。
关于javascript - 我怎样才能使这段代码更短，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14412771/