Jquery: скрыть аналогичные идентификаторы, показать конкретный идентификатор, несколько идентификаторов элементов - PullRequest
Новая
       27

Jquery: скрыть аналогичные идентификаторы, показать конкретный идентификатор, несколько идентификаторов элементов

1 голос
/ 01 марта 2011

Попытка показать аналогичный интервал, когда я наведу курсор мыши на другой интервал.Вовлечено несколько идентификаторов / объектов.

Идентификаторы имеют значение от 1 до 4. Существует 5 вариантов наведения, # CU_ $ i, # WIND_ $ i, # Q_ $ i, # WUP_ $ i и # hardline_ $ i,Все они «активируют» аналогичные идентификаторы ... Проверьте код.

Код до сих пор работает, есть ли "лучший" способ сделать что-то? 

<?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
}
?>

Ответы [ 3 ]

2 голосов
/ 01 марта 2011

Я думаю, что это может быть уменьшено до одной функции, если вы хотите / можете внести изменение или две в разметку, над которой она работает.

Я бы добавил класс к '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, которые раньше выглядели так: <span id="CU_1"></span> будут <span id="CU_1" class="mouseoverhook"></span>и все ваши spans, которые выглядели так: <span id="1_CU"></span> будет <span id="1_CU" class="HideShowhook1"></span>.

Примечание: я на самом деле не проверял это.

1 голос
/ 01 марта 2011

Кажется, что существует много избыточности, но это часто характер табличных данных. Это небольшая программа, так что это не так уж и сложно, но я бы предложил добавить идентификатор к вашему элементу контейнера (UL, TABLE и т. Д.) #Data и класс для каждого элемента для типа данных, которые он содержит (.cu, .wup , .wind, .q). С помощью идентификаторов и классов вы можете легко переключать каждый элемент с помощью механизма выбора jQuery.

В событиях, когда что-то должно быть скрыто или обнаружено, вы сначала скрываете все элементы с помощью 

$('#data li').addClass('hidden');
, а затем показывает те, которые хотите сохранить $('.cu').removeClass('hidden');
0 голосов
/ 01 марта 2011

Я просто добавил 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');
}
...