1

別のスパンにカーソルを合わせると、類似のスパンを表示しようとしています。複数の ID/オブジェクトが関係しています。

ID は 1 から 4 まであります。ホバーには #CU_$i、#WIND_$i、#Q_$i、#WUP_$i、#hardline_$i の 5 つがあります。これらはすべて、類似の 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

操作対象のマークアップに1つまたは2つの変更を加えることをいとわない/できる場合、これはおそらく1つの機能に減らすことができると思います。

「マウスオーバー」SPANsにクラスを追加して、jQuery のフックとして機能させ、別のクラスを非表示にしSPANsたり明らかにしたりします。'#CU_1'次に、アクティブ化の規則に従っているように見えるので'#1_CU'(1 つの例外を除いて)、関数を次のように書き直すことができます。

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>ものが would になり、次のように見えた<span id="CU_1" class="mouseoverhook"></span>すべてのものが次のspansようになります: <span id="1_CU"></span>would になります<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 に答える