Question

Jquery 多个弹出框显示事件中代码优化问题

在一个页面中有多个标题，鼠标放置时弹出一个选择框（如：腾讯首页中，更换频道显示的弹出框）
我写的代码冗余太高，有什么简化的方法么
$("#zhutouch1_divtan").mouseover(function(){
$("#touch").addClass("touch");
$("#touch").show();
$("#caijing").removeClass("tanab").addClass("tana");
});
$("#zhutouch1_divtan").mouseout(function(){
$("#touch").removeClass("touch");
$("#touch").hide();
$("#caijing").addClass("tanab").removeClass("tana");
});
$("#zhutouch2_divtan").mouseover(function(){
$("#touch").addClass("touch1");
$("#tiyu").removeClass("tanb").addClass("tanbc");
$("#touch").show();
});
$("#zhutouch2_divtan").mouseout(function(){
$("#touch").removeClass("touch1");
$("#tiyu").addClass("tanb").removeClass("tanbc");
$("#touch").hide();
});
（zhutouch1_divtan和zhutouch2_divtan是绑定的id，鼠标放置上面时弹出id=touch的框，但是框的位置不同，我只写了一个框的样式，通过添加css来改变位置，有什么简化代码的方法么？需要用each遍历么？）
新手出道，真的不太懂

Answer 1

$("#zhutouch1_divtan, #zhutouch2_divtan").hover(function(){//鼠标移入执行函数
var id = $(this).attr("id");//获取当前移到的对象。。进行执行对应的命令
if(id == "zhutouch1_divtan"){
$("#touch").addClass("touch");
$("#touch").show();
$("#caijing").removeClass("tanab").addClass("tana");
}else{
$("#touch").addClass("touch1");
$("#tiyu").removeClass("tanb").addClass("tanbc");
$("#touch").show();

}

}, function(){//鼠标移开执行函数
var id = $(this).attr("id");
if(id == "zhutouch1_divtan"){
$("#touch").removeClass("touch");
$("#touch").hide();
$("#caijing").addClass("tanab").removeClass("tana");
}else{
$("#touch").removeClass("touch1");
$("#tiyu").addClass("tanb").removeClass("tanbc");
$("#touch").hide();
}
}

大致是这样，多选择器执行统一函数，判断获取当前经过的是哪个对象执行对应的命令，估计还能写的更简洁，时间有限，想到的就是这样的

);

追问

您好，谢谢您的回答。
这个逻辑我能理解，可是代码量并没有减少。可不可使用each来替代

追答

each没怎么用过，不过这样的话，可能得封装成插件然后直接传dom节点进行操作会比较方便吧