window.onload=function(){
var oUl=document.getElementById('oUl');
var aLi=oUl.children;
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(this.index>=i){
aLi[i].className='ac';
}else{
aLi[i].className='';
}
}
};
}
}
$('#oUl > li').on('mouseover',function(){
$(this).prevAll().attr('class', '').end().nextAll().attr('class', 'ac');
})
$(function() {
$('#oUl').on('mouseover', 'li', function(e) {
var $t = $(this);
$t.siblings().removeClass('ac');
$t.addClass('ac').nextAll().addClass('ac');
});
})
$(function(){
var oULchild=$("#oUL *");
oULchild
.each(function(index){
$(this)[0].index=index;
})
.on("mouseover",function(){
oULchild.each(function(index){
$(this)[0].index>=index?$(this).addClass('ac'): $(this).removeClass('ac');
});
})
})
不知道你要做什么,如果是给鼠标所在的子对象添加class,移除其他子对象的class那就是第一个答案那样:
$(function(){
$("#oUL *").on("mouseover",function(){
$(this).addClass("ac")
.siblings()
.removeClass("ac")
})
})
$('#oUl > li').on('mouseover',function(){
$('#oUl > li:lt(' + ($(this).index() + 1) + ')').attr('class','ac');
$(this).nextAll().attr('class','');
})
不是最简洁的,但是能表达出你的意思
$(function(){
var aLi = $("#oUl li");
aLi.each(function() {
$(this).mouseover(function() {
$(this).addClass('ac').prevAll().addClass('ac').end().nextAll().removeClass('ac');
});
});
})
不知道你的需求,只是把你的代码翻译了一边,代码量貌似变多了,真是糟糕...
$(document).ready(function () {
var oLi = $('#oUl li')
oLi.each(function (index, item) {
item.index = index
item.onmouseover = function () {
$(item).each(function (index1, item1) {
if($(item).index >= index1){
$(item1).addClass('ac')
}else{
$(item1).removeClass('ac')
}
})
}
})
})
var aLi = $('#oUl li')
aLi.on('mouseover', function(){
aLi.each(function(index, value){
$(this).index >= index? $(this).attr('class', 'ac'): $(this).attr('class', '');
})
})
$("#oUL li").click(function(){
$(this).attr("class", "ac")
.siblings()
.attr("class", "")
})
一行解决:
$('#oUl > *').on('mouseover', function() {
$(this).prevAll().attr('class', '').end().nextAll().addBack().attr('class', 'ac');
});