关于JS封装的一个小问题，求解答~~

刚开始学js。。。

想要写一个类似网站后台下拉隐藏的效果，为什么封装好的JS没用呢？

我把代码上上来，麻烦大神帮忙看看
HTML代码：
<ul id="list">
         <li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:onClick=show('run') "><li>商品管理</li></a>
            <dd id="run">-订单管理</dd>
            <dd id="run">-在售商品管理</dd>
            <dd id="run">-添加商品</dd>
            <dd id="run">-待售商品管理</dd>
            <dd id="run">-属性设置</dd>
            <dd id="run">-商品详情模板</dd>
            <dd id="run">-商品回收站</dd>
            <dd id="run">-商品评价管理</dd>
            <dd id="run">-图片管理</dd>
            <dd id="run">-序列号规则管理</dd>
</ul>


JS代码：
function show(id)
{
if(document.getElementById(id).style.display='none')
{
document.getElementById(id).style.display='block';

}
else{
document.getElementById(id).style.display='none'


}

}

一运行就报错，报错提示是：
VM106:1 Uncaught ReferenceError: show is not defined
    at <anonymous>:1:9
(anonymous) @ VM106:1


麻烦大神帮忙看看哪里有问题~~

21 个解决方案

#1

貌似是你的冲突了 一个none隐藏 一个block显示

#2

或者是你的jquery应用顺序有问题，你可以把jquery的js应用放在第一个，而且你传的id有问题 没有说明到底是哪一个id

#3

<ul id="list">
        	<li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('run')"><li>商品管理</li></a>
            <dd class="run">-订单管理</dd>
            <dd class="run">-在售商品管理</dd>
            <dd class="run">-添加商品</dd>
            <dd class="run">-待售商品管理</dd>
            <dd class="run">-属性设置</dd>
            <dd class="run">-商品详情模板</dd>
            <dd class="run">-商品回收站</dd>
            <dd class="run">-商品评价管理</dd>
            <dd class="run">-图片管理</dd>
            <dd class="run">-序列号规则管理</dd>
</ul>
<script type="text/javascript">
function show(className){
	var doms = document.querySelectorAll("."+className);
	for (var i = 0; i < doms.length; i++) {
		if(doms[i].style.display=='none'){
			doms[i].style.display='block';	
		} else {
			doms[i].style.display='none';
		}
	}
}
</script>

#4

引用 3楼天际的海浪 的回复:

<ul id="list">
        	<li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('run')"><li>商品管理</li></a>
            <dd class="run">-订单管理</dd>
            <dd class="run">-在售商品管理</dd>
            <dd class="run">-添加商品</dd>
            <dd class="run">-待售商品管理</dd>
            <dd class="run">-属性设置</dd>
            <dd class="run">-商品详情模板</dd>
            <dd class="run">-商品回收站</dd>
            <dd class="run">-商品评价管理</dd>
            <dd class="run">-图片管理</dd>
            <dd class="run">-序列号规则管理</dd>
</ul>
<script type="text/javascript">
function show(className){
	var doms = document.querySelectorAll("."+className);
	for (var i = 0; i < doms.length; i++) {
		if(doms[i].style.display=='none'){
			doms[i].style.display='block';	
		} else {
			doms[i].style.display='none';
		}
	}
}
</script>

还是存在同样的问题呢。报错提示一样

#5

引用 2楼czz511_11 的回复:

或者是你的jquery应用顺序有问题，你可以把jquery的js应用放在第一个，而且你传的id有问题 没有说明到底是哪一个id

没有用到jquery耶。我是想隐藏所有ID=run的。不可以这么写吗

#6

还有一个问题，我想问一下，你代码中的querySelectorAll是什么意思啊，我目前还没学到这里

#7

引用 4 楼 weixin_38804687 的回复:

Quote: 引用 3楼天际的海浪 的回复:

<ul id="list">
        	<li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('run')"><li>商品管理</li></a>
            <dd class="run">-订单管理</dd>
            <dd class="run">-在售商品管理</dd>
            <dd class="run">-添加商品</dd>
            <dd class="run">-待售商品管理</dd>
            <dd class="run">-属性设置</dd>
            <dd class="run">-商品详情模板</dd>
            <dd class="run">-商品回收站</dd>
            <dd class="run">-商品评价管理</dd>
            <dd class="run">-图片管理</dd>
            <dd class="run">-序列号规则管理</dd>
</ul>
<script type="text/javascript">
function show(className){
	var doms = document.querySelectorAll("."+className);
	for (var i = 0; i < doms.length; i++) {
		if(doms[i].style.display=='none'){
			doms[i].style.display='block';	
		} else {
			doms[i].style.display='none';
		}
	}
}
</script>

还是存在同样的问题呢。报错提示一样

报错提示一样。这可能是js文件没有正确加载

#8

引用 5 楼 weixin_38804687 的回复:

Quote: 引用 2楼czz511_11 的回复:

或者是你的jquery应用顺序有问题，你可以把jquery的js应用放在第一个，而且你传的id有问题 没有说明到底是哪一个id

没有用到jquery耶。我是想隐藏所有ID=run的。不可以这么写吗

元素的id不能重名，对同名的id用document.getElementById()只能获取第一个

#9

引用 6 楼 weixin_38804687 的回复:

还有一个问题，我想问一下，你代码中的querySelectorAll是什么意思啊，我目前还没学到这里

http://www.cnblogs.com/daxian2012/archive/2012/10/18/2729359.html

#10

show方法把参数去掉吧

#11

<a href="javascript:show('run')；"><li>商品管理</li></a>
是不是掉了个分号；

或者是换个写法
<a href="javascript:void(0);" onclick="show('run')"><li>商品管理</li></a>

#12

<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="list">
         <li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:onClick=show() "><li>商品管理</li></a>
            <dd id="run">-订单管理</dd>
            <dd id="run">-在售商品管理</dd>
            <dd id="run">-添加商品</dd>
            <dd id="run">-待售商品管理</dd>
            <dd id="run">-属性设置</dd>
            <dd id="run">-商品详情模板</dd>
            <dd id="run">-商品回收站</dd>
            <dd id="run">-商品评价管理</dd>
            <dd id="run">-图片管理</dd>
            <dd id="run">-序列号规则管理</dd>
</ul>


<script type="text/javascript">
function show() {
if(document.getElementById("run").style.display=='none') {
document.getElementById("run").style.display='block';
}
else{
document.getElementById("run").style.display='none'
}

}
</script>


</body>
</html>

#13

引用 8楼天际的海浪 的回复:

Quote: 引用 5 楼 weixin_38804687 的回复:

Quote: 引用 2楼czz511_11 的回复:

或者是你的jquery应用顺序有问题，你可以把jquery的js应用放在第一个，而且你传的id有问题 没有说明到底是哪一个id

没有用到jquery耶。我是想隐藏所有ID=run的。不可以这么写吗

元素的id不能重名，对同名的id用document.getElementById()只能获取第一个

同名的id➕s获取呢

#14

function show(id){
	var els = document.getElementsByTagName('*');
	for(var i=0;i<els.length;i++){
		if (els[i].id==id){
			els[i].style.display = els[i].style.display == 'none'?'block':'none';
		}
	}
}

#15

<ul id="list">
        	<li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('run') "><li>商品管理</li></a>
            <dd id="run">-订单管理</dd>
            <dd id="run">-在售商品管理</dd>
            <dd id="run">-添加商品</dd>
            <dd id="run">-待售商品管理</dd>
            <dd id="run">-属性设置</dd>
            <dd id="run">-商品详情模板</dd>
            <dd id="run">-商品回收站</dd>
            <dd id="run">-商品评价管理</dd>
            <dd id="run">-图片管理</dd>
            <dd id="run">-序列号规则管理</dd>
</ul>
<script>
function show(id){
	var els = document.getElementsByTagName('*');
	for(var i=0;i<els.length;i++){
		if (els[i].id==id){
			els[i].style.display = els[i].style.display == 'none'?'block':'none';
		}
	}
}
</script>

a 的 href 后跟伪协议时不要加事件比如 href="javascript:show('run')"，不能写作href="javascript:onClick=show('run') "

另外，id最好保持每个ID在页面内具有唯一性

最后，getElementById没有对应的数组获取方式即getElementsById，查看教程，你可以使用 getElementsByTagName获取标签然后自行判断ID

#16

引用 13 楼 weixin_38804687 的回复:

Quote: 引用 8楼天际的海浪 的回复:

Quote: 引用 5 楼 weixin_38804687 的回复:

Quote: 引用 2楼czz511_11 的回复:

或者是你的jquery应用顺序有问题，你可以把jquery的js应用放在第一个，而且你传的id有问题 没有说明到底是哪一个id

没有用到jquery耶。我是想隐藏所有ID=run的。不可以这么写吗

元素的id不能重名，对同名的id用document.getElementById()只能获取第一个

同名的id➕s获取呢

没有getElementsById方法
但是可以用document.querySelectorAll("#run")获取多个同名id
不过按规定同一页面内id最好是唯一的，要同时获取多个元素还是用class比较好。

#17

引用 16楼天际的海浪 的回复:

Quote: 引用 13 楼 weixin_38804687 的回复:

Quote: 引用 8楼天际的海浪 的回复:

Quote: 引用 5 楼 weixin_38804687 的回复:

Quote: 引用 2楼czz511_11 的回复:

或者是你的jquery应用顺序有问题，你可以把jquery的js应用放在第一个，而且你传的id有问题 没有说明到底是哪一个id

没有用到jquery耶。我是想隐藏所有ID=run的。不可以这么写吗

元素的id不能重名，对同名的id用document.getElementById()只能获取第一个

同名的id➕s获取呢

没有getElementsById方法
但是可以用document.querySelectorAll("#run")获取多个同名id
不过按规定同一页面内id最好是唯一的，要同时获取多个元素还是用class比较好。

原来是这样，谢谢指教～

#18

引用 15楼文盲老顾 的回复:

<ul id="list">
        	<li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('run') "><li>商品管理</li></a>
            <dd id="run">-订单管理</dd>
            <dd id="run">-在售商品管理</dd>
            <dd id="run">-添加商品</dd>
            <dd id="run">-待售商品管理</dd>
            <dd id="run">-属性设置</dd>
            <dd id="run">-商品详情模板</dd>
            <dd id="run">-商品回收站</dd>
            <dd id="run">-商品评价管理</dd>
            <dd id="run">-图片管理</dd>
            <dd id="run">-序列号规则管理</dd>
</ul>
<script>
function show(id){
	var els = document.getElementsByTagName('*');
	for(var i=0;i<els.length;i++){
		if (els[i].id==id){
			els[i].style.display = els[i].style.display == 'none'?'block':'none';
		}
	}
}
</script>

a 的 href 后跟伪协议时不要加事件比如 href="javascript:show('run')"，不能写作href="javascript:onClick=show('run') "

另外，id最好保持每个ID在页面内具有唯一性

最后，getElementById没有对应的数组获取方式即getElementsById，查看教程，你可以使用 getElementsByTagName获取标签然后自行判断ID

还是报一样的错呢～

#19

引用 18 楼 weixin_38804687 的回复:

Quote: 引用 15楼文盲老顾 的回复:

<ul id="list">
        	<li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('run') "><li>商品管理</li></a>
            <dd id="run">-订单管理</dd>
            <dd id="run">-在售商品管理</dd>
            <dd id="run">-添加商品</dd>
            <dd id="run">-待售商品管理</dd>
            <dd id="run">-属性设置</dd>
            <dd id="run">-商品详情模板</dd>
            <dd id="run">-商品回收站</dd>
            <dd id="run">-商品评价管理</dd>
            <dd id="run">-图片管理</dd>
            <dd id="run">-序列号规则管理</dd>
</ul>
<script>
function show(id){
	var els = document.getElementsByTagName('*');
	for(var i=0;i<els.length;i++){
		if (els[i].id==id){
			els[i].style.display = els[i].style.display == 'none'?'block':'none';
		}
	}
}
</script>

a 的 href 后跟伪协议时不要加事件比如 href="javascript:show('run')"，不能写作href="javascript:onClick=show('run') "

另外，id最好保持每个ID在页面内具有唯一性

最后，getElementById没有对应的数组获取方式即getElementsById，查看教程，你可以使用 getElementsByTagName获取标签然后自行判断ID

还是报一样的错呢～

js文件没有正确加载

#20

引用 19楼天际的海浪 的回复:

Quote: 引用 18 楼 weixin_38804687 的回复:

Quote: 引用 15楼文盲老顾 的回复:

<ul id="list">
        	<li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('run') "><li>商品管理</li></a>
            <dd id="run">-订单管理</dd>
            <dd id="run">-在售商品管理</dd>
            <dd id="run">-添加商品</dd>
            <dd id="run">-待售商品管理</dd>
            <dd id="run">-属性设置</dd>
            <dd id="run">-商品详情模板</dd>
            <dd id="run">-商品回收站</dd>
            <dd id="run">-商品评价管理</dd>
            <dd id="run">-图片管理</dd>
            <dd id="run">-序列号规则管理</dd>
</ul>
<script>
function show(id){
	var els = document.getElementsByTagName('*');
	for(var i=0;i<els.length;i++){
		if (els[i].id==id){
			els[i].style.display = els[i].style.display == 'none'?'block':'none';
		}
	}
}
</script>

a 的 href 后跟伪协议时不要加事件比如 href="javascript:show('run')"，不能写作href="javascript:onClick=show('run') "

另外，id最好保持每个ID在页面内具有唯一性

最后，getElementById没有对应的数组获取方式即getElementsById，查看教程，你可以使用 getElementsByTagName获取标签然后自行判断ID

还是报一样的错呢～

js文件没有正确加载

可是引用是对的啊

#21

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <ul id="list">
         <li>首页</li>
            <li>我的店铺</li>
            <a href="javascript:show('aa')"><li>商品管理</li></a>
<div id="aa" style="display:none">
            <dd id="run">-订单管理</dd>
            <dd id="run">-在售商品管理</dd>
            <dd id="run">-添加商品</dd>
            <dd id="run">-待售商品管理</dd>
            <dd id="run">-属性设置</dd>
            <dd id="run">-商品详情模板</dd>
            <dd id="run">-商品回收站</dd>
            <dd id="run">-商品评价管理</dd>
            <dd id="run">-图片管理</dd>
            <dd id="run">-序列号规则管理</dd>
</div>
</ul>
 </body>
 <script type="text/javascript">
 var a=true;
    function show(id){

if(a){
document.getElementById(id).style.display='block'

a=false;
}
else{

document.getElementById(id).style.display='none'
a=true;
}

}

 </script>
</html>