日期:2014-05-16  浏览次数:20316 次

如何写一个事件绑定,不用每个id都写?
$('#fold1 dl').find('dd').hide();
$('#fold1 dl:first').find('dt').hide();
$('#fold1 dl:first').find('dd').show();
$('#fold1 dt').hover(function(){
$('#fold1 dl').find('dt').show();
$('#fold1 dl').find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});

$('#fold2 dl').find('dd').hide();
$('#fold2 dl:first').find('dt').hide();
$('#fold2 dl:first').find('dd').show();
$('#fold2 dt').hover(function(){
$('#fold2 dl').find('dt').show();
$('#fold2 dl').find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});

$('#fold3 dl').find('dd').hide();
$('#fold3 dl:first').find('dt').hide();
$('#fold3 dl:first').find('dd').show();
$('#fold3 dt').hover(function(){
$('#fold3 dl').find('dt').show();
$('#fold3 dl').find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});

$('#fold4 dl').find('dd').hide();
$('#fold4 dl:first').find('dt').hide();
$('#fold4 dl:first').find('dd').show();
$('#fold4 dt').hover(function(){
$('#fold4 dl').find('dt').show();
$('#fold4 dl').find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});

$('#fold5 dl').find('dd').hide();
$('#fold5 dl:first').find('dt').hide();
$('#fold5 dl:first').find('dd').show();
$('#fold5 dt').hover(function(){
$('#fold5 dl').find('dt').show();
$('#fold5 dl').find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});

$('#fold6 dl').find('dd').hide();
$('#fold6 dl:first').find('dt').hide();
$('#fold6 dl:first').find('dd').show();
$('#fold6 dt').hover(function(){
$('#fold6 dl').find('dt').show();
$('#fold6 dl').find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});
想上面的这种,只是id数有变化,其他地方没有变化,怎么写?要是有20个每个都写的话太麻烦,怎么能简洁高效的写?
function

------解决方案--------------------
 
$("div[id^='fold'] dl") //假设标签是DIV
------解决方案--------------------
1.
$('#fold1 dl,#fold2 dl,#fold3 dl,#fold4 dl,#fold5 dl , #fold6 dl').find('dd').hide();
$('#fold1 dl,#fold2 dl,#fold3 dl,#fold4 dl,#fold5 dl , #fold6 dl').find('dt').hide();
$('#fold1 dl,#fold2 dl,#fold3 dl,#fold4 dl,#fold5 dl , #fold6 dl').find('dd').show();
$('#fold1 dl,#fold2 dl,#fold3 dl,#fold4 dl,#fold5 dl , #fold6 dl').hover(function(){
$(this).find('dt').show();
$(this).find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});


2.
$('div[id^=fold] dl').find('dd').hide();
$('div[id^=fold] dl').find('dt').hide();
$('div[id^=fold] dl').find('dd').show();
$('div[id^=fold] dl').hover(function(){
$(this).find('dt').show();
$(this).find('dd').hide();
$(this).hide();
$(this).parent().find('dd').toggle();
});