Jquery: Hide analogous IDs, show specific ID, multiple item IDs

Trying to show the analogous Span when I hover over another Span. Multiple IDs/Objects involved.

IDs go from 1 to 4. There are for 5 hovers, #CU_$i, #WIND_$i, #Q_$i, #WUP_$i, and #hardline_$i . All of these "enable" the analogous IDs... Check code.

Code so far works, is there a "better" way to do things?

<?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('hid开发者_StackOverflow中文版den');
    $('#<?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
}
?>

I think this could probably be reduced to one function if you are willing/able to make a change or two to the markup it's operating on.

I'd add a class to the 'mouseover' SPANs to act as a hook for the jQuery, and another for the SPANs that you are hiding and revealing. Then, since you seem to be following a convention of '#CU_1' activates '#1_CU' (with one exception) maybe you could rewrite your function like this:

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

If you are able to change the '#hardphone' to follow the same convention then it should work as is. If not, you'd need to modify it to take account of the exception like this:

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

So now all of your spans that previously looked like this: <span id="CU_1"></span> would be <span id="CU_1" class="mouseoverhook"></span> and all of your spans that looked like this: <span id="1_CU"></span> would be <span id="1_CU" class="HideShowhook1"></span>.

Note: I haven't actually tested this.

There appears to be a lot of redundancy but that is often the nature of tabular data. This is a small program so it's not a big deal but I would suggest adding an ID to your container element (UL, TABLE, etc) of #data and a class on each element for type of data it contains (.cu, .wup, .wind, .q). With ID's and classes you can easily toggle each element using jQuery's selector engine.

On the events when something should be hidden or revealed you first hide all elements with

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

I simply added OnMouseOver over each span

<span  id="CU_<?php echo $id; ?>" onmouseover="showphone('CU',<?php echo $id; ?>);">CU</span>

and created this function:

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