Jquery : 유사한 ID 숨기기, 특정 ID 표시, 여러 상품 ID

Question

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

Answer 1

나는 이것이 아마도 한 가지 기능으로 축소 될 수 있다고 생각합니다./작업중인 마크 업에 대해 두 개 또는 두 개를 변경할 수 있습니다.

'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'을 변경 할 수있는 경우 있는 그대로 작동해야합니다. <span id="CU_1" class="mouseoverhook"></span>을 것 <span id="CU_1"></span>과 닮은 당신의 spans의 모든 : 지금 그래서

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="1_CU"></span>은 <span id="1_CU" class="HideShowhook1"></span>이됩니다.

참고 : 실제로 테스트하지 않았습니다.

Answer 2

많은 중복성이있는 것처럼 보일 수도 있지만 종종 테이블 형식 데이터의 특성입니다. 이것은 큰 프로그램이 아니기 때문에 작은 프로그램이지만 #data의 컨테이너 요소 (UL, TABLE 등)에 ID를 추가하고 각 요소의 클래스에 포함 된 데이터 형식에 대한 클래스를 추가하는 것이 좋습니다 (.cu, .wup , .wind, .q). ID와 클래스를 사용하면 jQuery의 선택기 엔진을 사용하여 각 요소를 쉽게 전환 할 수 있습니다. 이벤트에

무언가가 숨겨져 야 또는 당신이 먼저 $('.cu').removeClass('hidden');

Answer 3

는 단순히 각 스팬

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

이상에 OnMouseOver을 추가 유지하려는 사람들을 보여 다음

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

모든 요소를 ​​숨기고 밝혀 이 함수를 만들었습니다 :

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