Jquery：隱藏類似ID，顯示特定ID，多個項目ID

當我將鼠標懸停在另一個Span上時，嘗試顯示類似的Span。涉及多個ID /對象。Jquery：隱藏類似ID，顯示特定ID，多個項目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 
} 
?>

來源

2011-02-28 ioannis

我認爲如果你願意，這可能會減少到一個函數/能夠對其操作的標記進行一兩個更改。

我想爲'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，看上去像的這個：將是。

注：我沒有真正測試過這個。

來源

2011-02-28 23:06:37 Gareth

首先到達那裏，但謝謝;） – ioannis 2011-02-28 23:08:32

似乎有很多冗餘，但這往往是表格數據的本質。這是一個小程序，所以這不是什麼大問題，但我會建議在您的容器元素（UL，TABLE等）中添加一個ID，並在每個元素上爲它包含的數據類型添加一個類（.cu，.wup ，.wind，.q）。使用ID和類，您可以使用jQuery的選擇器引擎輕鬆切換每個元素。

在活動時的東西應該被隱藏或顯露出來，你先隱藏與

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

所有元素，然後表明你想保留 $('.cu').removeClass('hidden');

來源

2011-02-28 22:26:13

jQuery團隊建議不要在$（）調用中使用多個選擇器。嘗試$（'＃data'）。find（'li'）。這避免了嘶嘶聲引擎，並會讓你的JS運行速度稍快。 – Seth 2011-02-28 22:28:32

第二個這個。 jquery的選擇器引擎和處理集合的能力就像處理單個項目一樣簡單，看起來應該使它更加簡潔。 – Jeff 2011-02-28 22:29:46

感謝您的建議。我發現了一個更好的方法來做到這一點;） – ioannis 2011-02-28 23:03:37

我只是簡單地添加的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-28 23:03:15 ioannis

Jquery：隱藏類似ID，顯示特定ID，多個項目ID

回答

相關問題