<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,这个真不知道什么原因。问题有点长,大家慢慢看啊。在线等结果
<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,这个真不知道什么原因。问题有点长,大家慢慢看啊。在线等结果
<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>
这样试下:<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>
var tab= "a"+i;
(function(m){
$("a"+(m+1)).onclick=function(){
$("b").style.display="none";
$("cc").innerText=text[m];
}
})(i);
}