Question

当我将鼠标悬停在另一个跨度上时，尝试显示类似的跨度。涉及多个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
}
?>

Answer 1

如果您愿意/能够对其正在运行的标记做出更改或两次更改，我认为这可能会减少到一个功能。

我会在'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的所有看起来像这样：将是{{1}}。

注意：我实际上没有测试过这个。

Answer 2

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

在应隐藏或显示某些内容的事件中，您首先使用

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

隐藏所有元素，然后显示您要保留的内容$('.cu').removeClass('hidden');

Answer 3

我只是在每个范围内添加了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');
}

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

3 个答案: