求助大家一个很小白的问题

javascript语言
我想对一些span进行一些操作如下比如
<span id = "jack" onmouseover = "color" onmouseout = "uncolor">
就是要鼠标移到这个span上面就变黄，移开就变另外一个颜色。
但是我想在很多span里面实现，所以document.getElementById("jack")里面的参数就应该是动态的了，不知道该怎么实现。。求大神帮助
function color(){
document.getElementById("jack").style.background = "yellow";
}
function uncolor(id){
document.getElementById("jack").style.background = "AliceBlue";
}还有一个问题：怎么样能动态创建span？并且在动态创建的span里面也调用这些函数？谢谢。

解决方案 »

  1.   


    <script type="text/javascript">
    function color(obj){
        obj.style.background = "yellow";
    }
    function uncolor(obj){
        obj.style.background = "AliceBlue";
    }
    </script>
    <span onmouseover = "color(this)" onmouseout = "uncolor(this)">AAA</span>
    <span onmouseover = "color(this)" onmouseout = "uncolor(this)">BBB</span>
    <span onmouseover = "color(this)" onmouseout = "uncolor(this)">CCC</span>
    <span onmouseover = "color(this)" onmouseout = "uncolor(this)">DDD</span>
      

  2.   

    function init(){
    var spans=document.getElementsByTagName("span");
    for(var i=0;i<spans.length;i++){
    spans[i].onmouseover=function(){
    this.style.backgroundColor='yellow';
    }
    spans[i].onmouseout=function(){
    this.style.backgroundColor='white';
    }
    }
    }
    window.onload=init;
      

  3.   

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    span{width:20px;height:20px;display:block;float:left;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $("span").hover(function(){
    $(this).css("background","#333");
    },function(){
    $(this).css("background","#666");
    });
    });
    </script> 
    </head>
    <body>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    </body>
    </html>
    你想要的应该是这种.
      

  4.   

    楼上几位都能实现我想要的功能，谢谢，只不过还有一个问题，我怎么能动态生成span，然后调用呢？其实我是想做一个类似于谷歌翻译页面的web,点击不仅是要你们说过的功能，还要点击span之后能进行一些动作，毕业设计无奈web开发小白，很着急
      

  5.   

    楼上几位都能实现我想要的功能，谢谢，只不过还有一个问题，我怎么能动态生成span，然后调用呢？其实我是想做一个类似于谷歌翻译页面的web,点击不仅是要你们说过的功能，还要点击span之后能进行一些动作，毕业设计无奈web开发小白，很着急
      

  6.   

    谢谢，请问如果我动态生成span,怎么才能让每个span都在onmouseover的时候调用color(this),onmouseover的时候调用color(this)呢？或者有没有其他方法可以实现？谢谢了
      

  7.   

    var datas = ['s1','s2','s3'];
    var dataContainer = $('<div id="dataContainer"></div>');
    $.each(datas,function(index,data){
        var s = $('<span>'+data+'</span></br>');
        s.hover(function(){
            $(this).addClass('yellow');
        },function(){
            $(this).removeClass('yellow');
        });
        dataContainer.append(s);
    });
    $('body').append(dataContainer);js生成的dom,用jquery,
    http://jsfiddle.net/TbvMx/
      

  8.   

    可以用javascript原生dom操作函数，熟悉了再用框架吧
      

  9.   

    你的要求直接用CSS就好了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <style type="text/css">
    #aa span {
    background-color: #e8e8e8;
    }
    #aa span:hover {
    background-color: #ffff00;
    }
    </style>
    </head><body>
    <div id="aa">
    <span>aaaaaaaaa</span>
    <span>566666666</span>
    <span>aaaaaaaaa</span>
    <span>454554544</span>
    <span>aaaaaaaaa</span>
    <span>aaaaaaaaa</span>
    </div>
    </body>
    </html>