Jquery:隐藏类似ID,显示特定ID,多个项目ID
当我将鼠标悬停在另一个Span上时,尝试显示类似的Span。涉及多个ID /对象。Jquery:隐藏类似ID,显示特定ID,多个项目ID
ID从1到4.有5个悬停,#CU_ $ i,#WIND_ $ i,#Q_ $ i,#WUP_ $ i和#hardline_ $ i。所有这些“启用”类似的ID ...检查代码。
到目前为止的代码工作,有没有一种“更好”的方式来做事情?
<?php for ($i = 1; $i <= 4; $i++) {
?>
jQuery('#CU_<?php echo $i; ?>').mouseover(function() {
$('#<?php echo $i; ?>_CU').removeClass('hidden');
$('#hardphone_<?php echo $i; ?>').addClass('hidden');
$('#<?php echo $i; ?>_Q').addClass('hidden');
$('#<?php echo $i; ?>_WIND').addClass('hidden');
$('#<?php echo $i; ?>_WUP').addClass('hidden');
});
jQuery('#WIND_<?php echo $i; ?>').mouseover(function() {
$('#<?php echo $i; ?>_WIND').removeClass('hidden');
$('#hardphone_<?php echo $i; ?>').addClass('hidden');
$('#<?php echo $i; ?>_Q').addClass('hidden');
$('#<?php echo $i; ?>_WUP').addClass('hidden');
$('#<?php echo $i; ?>_CU').addClass('hidden');
});
jQuery('#Q_<?php echo $i; ?>').mouseover(function() {
$('#<?php echo $i; ?>_Q').removeClass('hidden');
$('#hardphone_<?php echo $i; ?>').addClass('hidden');
$('#<?php echo $i; ?>_CU').addClass('hidden');
$('#<?php echo $i; ?>_WIND').addClass('hidden');
$('#<?php echo $i; ?>_WUP').addClass('hidden');
});
jQuery('#WUP_<?php echo $i; ?>').mouseover(function() {
$('#<?php echo $i; ?>_WUP').removeClass('hidden');
$('#hardphone_<?php echo $i; ?>').addClass('hidden');
$('#<?php echo $i; ?>_CU').addClass('hidden');
$('#<?php echo $i; ?>_WIND').addClass('hidden');
$('#<?php echo $i; ?>_Q').addClass('hidden');
});
jQuery('#hardline__<?php echo $i; ?>').mouseover(function() {
$('#<?php echo $i; ?>_WUP').addClass('hidden');
$('#<?php echo $i; ?>_CU').addClass('hidden');
$('#<?php echo $i; ?>_WIND').addClass('hidden');
$('#<?php echo $i; ?>_Q').addClass('hidden');
$('#hardphone_<?php echo $i; ?>').removeClass('hidden');
});
<?php
}
?>
我认为如果你愿意,这可能会减少到一个函数/能够对其操作的标记进行一两个更改。
我想为'mouseover'SPANs
添加一个类来充当jQuery的钩子,另一个用于隐藏和显示的SPANs
。然后,因为你似乎是'#CU_1'
公约下启动'#1_CU'
(有一个例外),也许你可以重写你的函数是这样的:
jQuery('.mouseoverhook').mouseover(function()
{
var idbits=$(this).attr('id').split('_');
jQuery('.HideShowhook'+idbits[1]).addClass('hidden');
jQuery('#'+idbits[1]+'_'+idbits[0]).removeClass('hidden');
}
如果你能够改变'#hardphone'
遵循相同的约定则应该按原样工作。如果没有,你需要修改它考虑到例外的是这样的:
jQuery('.mouseoverhook').mouseover(function()
{
var idbits=$(this).attr('id').split('_');
jQuery('.HideShowhook'+idbits[1]).addClass('hidden');
if(idbits[0]!="hardline")
jQuery('#'+idbits[1]+'_'+idbits[0]).removeClass('hidden');
else
jQuery('#hardphone_'+idbits[1]).removeClass('hidden');
}
所以,现在所有的spans
以前看起来是这样的:<span id="CU_1"></span>
将<span id="CU_1" class="mouseoverhook"></span>
和你spans
,看上去像的这个:<span id="1_CU"></span>
将是<span id="1_CU" class="HideShowhook1"></span>
。
注:我没有真正测试过这个。
似乎有很多冗余,但这往往是表格数据的本质。这是一个小程序,所以这不是什么大问题,但我会建议在您的容器元素(UL,TABLE等)中添加一个ID,并在每个元素上为它包含的数据类型添加一个类(.cu,.wup ,.wind,.q)。使用ID和类,您可以使用jQuery的选择器引擎轻松切换每个元素。
在活动时的东西应该被隐藏或显露出来,你先隐藏与
$('#data li').addClass('hidden');所有元素,然后表明你想保留
$('.cu').removeClass('hidden');
我只是简单地添加的onmouseover在每个跨度
<span id="CU_<?php echo $id; ?>" onmouseover="showphone('CU',<?php echo $id; ?>);">CU</span>
的那些并创建了这个功能:
function showphone(which,id) {
$("#"+id+"_hardphone").addClass('hidden');
$("#"+id+"_WUP").addClass('hidden');
$("#"+id+"_CU").addClass('hidden');
$("#"+id+"_WIND").addClass('hidden');
$("#"+id+"_Q").addClass('hidden');
$("#"+id+"_"+which).removeClass('hidden');
}
首先到达那里,但谢谢;) – ioannis 2011-02-28 23:08:32