模拟jQuery库，实现图片的隐藏和显

来源：互联网发布：淘宝官方投诉电话号码编辑：程序博客网时间：2024/06/02 03:47

1.jsp

<img src="images/A~55)18]@]MC92F1L6`N90K.png"></img><input id="hide" type="button" value="隐藏"><input id="show" type="button" value="显示"><script type="text/javascript">function $(str) {document.getElementById(str).onclick = function() {var img = document.images[0];if ("hide" == str) {img.style.visibility = "hidden";}if ("show" == str) {img.style.visibility = "visible";}}}</script><script type="text/javascript">$("hide");$("show");</script>

将第一个js的代码放进新建的js文件

2.js

//显示和隐藏图片function $(str) {document.getElementById(str).onclick = function() {var img = document.images[0];if ("hide" == str) {img.style.visibility = "hidden";}if ("show" == str) {img.style.visibility = "visible";}}}

在1.jsp中引入2.js

<script type="text/javascript" src="js/2.js"></script><img src="images/A~55)18]@]MC92F1L6`N90K.png"></img><input id="hide" type="button" value="隐藏"><input id="show" type="button" value="显示"><script type="text/javascript">$("hide");$("show");</script>

这样就很大程度的减少了代码量，提高了效率

0 0