1

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

3 回答 3

2

我认为如果您愿意/能够对其正在运行的标记进行一两次更改，这可能会简化为一个功能。

我会在“鼠标悬停”中添加一个类以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>will be<span id="CU_1" class="mouseoverhook"></span>和你所有spans看起来像这样的：<span id="1_CU"></span>will be <span id="1_CU" class="HideShowhook1"></span>。

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

于 2011-02-28T23:06:37.390 回答
1

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

在应该隐藏或显示某些东西的事件中，您首先隐藏所有元素

$('#data li').addClass('hidden');
然后显示你想要保留的那些$('.cu').removeClass('hidden');

于 2011-02-28T22:26:13.130 回答
0

我只是在每个跨度上添加了 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-28T23:03:15.400 回答