<body>
<div class="paixu" id="all">
<div id="cc"><a>默认排序</a></div>
<ul id="b">
<li id="a1"><a href="#">价格从高到底排序1</a></li>
<li id="a2"><a href="#">价格从高到底排序2</a></li>
<li id="a3"><a href="#">价格从高到底排序3</a></li>
<li id="a4"><a href="#">恢复默认排序</a></li>
</ul>

</div>
</body>
<script type="text/javascript">
function $(str){
return document.getElementById(str);
}
function aaa(){
$("b").style.display="block";
var text=["价格从高到底排序1","价格从高到底排序2","价格从高到底排序3","默认排序"];
for(var i=0;i<4;i++)
{
var tab="a"+i;
$("tab").onclick=function(){
$("b").style.display="none";
   $("cc").innerText=texy[i];
};
}
}
 $("cc").onmouseover=aaa;
</script>要求,鼠标经过默认排序那个DIV时,下面的ul显示,ul初始的display为None。点击Li后cc里面的内容显示为JS中数组里的内容。我知道有一种方法是写个函数然后给li都添加事件。但我想试着用这种方法,不过出现一些错误。
问题1:
$("cc")和$("tab")均提示为空,所以分别添加的事件不能进行,不知道是不是因为div里没有这些事件类型。可是如果我在html里直接加onmouseover又可以运行。
问题2:我本来想通过那个bind函数来添加事件的,function bind(el,type,handle)//handle指函数
{
if(el.addEvementListener){
el.addEvementListener(type,handle,false);
}
else if(el.attachEvent){
el.attachEvent("on"+type;handle);
}
else{
el["on"+type]=handle;
}
}
但是有了这个函数,就无法找到函数aaa,这个真不知道什么原因。问题有点长,大家慢慢看啊。在线等结果

解决方案 »

  1.   

    发出来了啊,body里就是html代码啊
      

  2.   

    tab是js中我定义的一个变量,多加了个双引号,打错了
      

  3.   

    //应该没问题了吧
    <body>
    <div class="paixu" id="all">
    <div id="cc"><a>默认排序</a></div>
    <ul id="b">
        <li id="a1"><a href="#">价格从高到底排序1</a></li>
        <li id="a2"><a href="#">价格从高到底排序2</a></li>
        <li id="a3"><a href="#">价格从高到底排序3</a></li>
        <li id="a4"><a href="#">恢复默认排序</a></li>
    </ul></div>
    </body>
    <script type="text/javascript">
    function $(str){
    return document.getElementById(str);
    }
    function aaa(){
    $("b").style.display="block";
    var text=["价格从高到底排序1","价格从高到底排序2","价格从高到底排序3","默认排序"];
    for(var i=1;i<=4;i++) {
    var tab= "a"+i;
    //alert(tab);
    $(tab).onclick=function(m){
    return function(){
    $("b").style.display="none";
    $("cc").innerText=text[m-1];
    }
    }(i);
    }
    }
     //$("cc").onmouseover=aaa;
     bind($("cc"),"mouseover",aaa);
     function bind(el,type,handle) {
    if(el.addEvementListener){
    el.addEvementListener(type,handle,false);
    }
    else if(el.attachEvent){
    el.attachEvent("on"+ type,handle);
    }
    else{
    el["on"+type]=handle;
    }
    }
    </script>
      

  4.   

    在你的for循环里,页面保存了循环完毕后i的终值(4),因此 每个onclick对应的function中是text[4],这是找不到的。
    这样试下:<script type="text/javascript">
        function $(str){
            return document.getElementById(str);
        }
        
        function aaa(){
            $("b").style.display="block";
        }
        
        function showSelect(li){
            $("cc").innerText=li.innerText;
        }
        
        $("cc").onmouseover=aaa;
        var lis = document.getElementsByTagName('li');
        for(i=0; i<lis.length; i++){
            lis[i].onclick = function (){
                showSelect(this);
            }
        }
    </script>
      

  5.   

      for(var i=0;i<4;i++)    {
            var tab= "a"+i;
          
           (function(m){
               $("a"+(m+1)).onclick=function(){
                    $("b").style.display="none";
                    $("cc").innerText=text[m];
                }
            })(i);
        }