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 
} 
?>

来源

2011-02-28 ioannis

我认为如果你愿意，这可能会减少到一个函数/能够对其操作的标记进行一两个更改。

我想为'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以前看起来是这样的：将和你spans，看上去像的这个：将是。

注：我没有真正测试过这个。

来源

2011-02-28 23:06:37 Gareth

首先到达那里，但谢谢;） – ioannis 2011-02-28 23:08:32

似乎有很多冗余，但这往往是表格数据的本质。这是一个小程序，所以这不是什么大问题，但我会建议在您的容器元素（UL，TABLE等）中添加一个ID，并在每个元素上为它包含的数据类型添加一个类（.cu，.wup ，.wind，.q）。使用ID和类，您可以使用jQuery的选择器引擎轻松切换每个元素。

在活动时的东西应该被隐藏或显露出来，你先隐藏与

$('#data li').addClass('hidden');

所有元素，然后表明你想保留 $('.cu').removeClass('hidden');

来源

2011-02-28 22:26:13

jQuery团队建议不要在$（）调用中使用多个选择器。尝试$（'＃data'）。find（'li'）。这避免了嘶嘶声引擎，并会让你的JS运行速度稍快。 – Seth 2011-02-28 22:28:32

第二个这个。 jquery的选择器引擎和处理集合的能力就像处理单个项目一样简单，看起来应该使它更加简洁。 – Jeff 2011-02-28 22:29:46

感谢您的建议。我发现了一个更好的方法来做到这一点;） – ioannis 2011-02-28 23:03:37

我只是简单地添加的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'); 
}

来源

2011-02-28 23:03:15 ioannis

Jquery：隐藏类似ID，显示特定ID，多个项目ID

回答

相关问题