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

当我悬停在另一个跨度上时，试图显示类似的跨度。涉及多个ID/对象

ID从1到4。共有5次悬停，分别为#CU#U$i、#WIND#i、#Q#U$i、#WUP#U$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
}
?>

jQuery（'#CU'）.mouseover（函数（）{
$（'u#u-CU'）。removeClass（'hidden'）；
$（'硬电话'）.addClass（'隐藏'）；
$（'##Q'）.addClass（'hidden'）；
$（'u#u WIND'）.addClass（'hidden'）；
$（'u#WUP'）.addClass（'hidden'）；
});
jQuery（'#WIND'）.mouseover（函数（）{
$（'u#u WIND'）。移除类（'hidden'）；
$（'硬电话'）.addClass（'隐藏'）；
$（'##Q'）.addClass（'hidden'）；
$（'u#WUP'）.addClass（'hidden'）；
$（'#59u'）.addClass（'hidden'）；
});
jQuery（'#Q'）.mouseover（函数（）{
$（'##Q'）。removeClass（'hidden'）；
$（'硬电话'）.addClass（'隐藏'）；
$（'#59u'）.addClass（'hidden'）；
$（'u#u WIND'）.addClass（'hidden'）；
$（'u#WUP'）.addClass（'hidden'）；
});
jQuery（'#WUP'）.mouseover（函数（）{
$（'u#WUP'）。removeClass（'hidden'）；
$（'硬电话'）.addClass（'隐藏'）；
$（'#59u'）.addClass（'hidden'）；
$（'u#u WIND'）.addClass（'hidden'）；
$（'##Q'）.addClass（'hidden'）；
});
jQuery（'#hardline'.mouseover（函数（）{
$（'u#WUP'）.addClass（'hidden'）；
$（'#59u'）.addClass（'hidden'）；
$（'u#u WIND'）.addClass（'hidden'）；
$（'##Q'）.addClass（'hidden'）；
$（'#hardphone'）.removeClass（'hidden'）；
});

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

---

在应该隐藏或显示某些内容的事件中，首先使用$（'#data li'）隐藏所有元素；然后显示要保留的

$（'.cu'）.removeClass（'hidden'）
我只是在每个跨度上添加了OnMouseOver

$('#data li').addClass('hidden');
<span  id="CU_<?php echo $id; ?>" onmouseover="showphone('CU',<?php echo $id; ?>);">CU</span>

我认为，如果您愿意/能够对其操作的标记进行一两次更改，那么这可能会简化为一个函数

我将向“mouseover”
span
添加一个类，作为jQuery的钩子，并为隐藏和显示的
span
添加另一个类。然后，由于您似乎遵循了
“#CU_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');
}

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');
}

如果您能够将

“#硬电话”更改为遵循相同的约定，则应按原样工作。如果没有，则需要修改它以考虑以下异常：

jQuery('.mouseoverhook').mouseover(function()
{
    var idbits=$(this).attr('id').split('_');
    jQuery('.HideShowhook'+idbits[1]).addClass('hidden');
    jQuery('#'+idbits[1]+'_'+idbits[0]).removeClass('hidden');
}

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');
}

因此，现在所有以前看起来像这样的

都是

，所有看起来像这样的

都是

---

注意：我实际上还没有对此进行测试。

jQuery团队建议不要在$（）调用中使用多个选择器。请尝试$（'#data'）。查找（'li'）。这避免了sizzle引擎，并将使您的JS运行稍微快一点。jquery的选择器引擎和处理集合与处理单个项一样简单的能力似乎应该使它更加简洁。感谢您的推荐。我找到了一个更好的方法；）