별도의 동적 div를 한 번 타겟팅하는 방법 Cluetip이 활성화 되나요?

Question

제품 카탈로그가 있습니다. 미리보기 이미지를 롤오버하면 제품 설명이 툴팁 (Cluetip)에 나타납니다. Cluetip이 활성화되면 관련 이미지 주위에 그림자가 나타납니다.

onActivate: function() { $("#shadow").fadeIn(1000); } 

을하지만 문제는 CMS가 동적으로 DIV의 ID를 생성하는 내 경우에, 그래서 그들은 이름이 : 그 내용은

나는이 Cluetip가 활성화 될 때이 사업부를 대상으로 어떻게 이미지 주변의 그림자와 와 별도의 사업부를 만들어 # shadow6, # shadow8, # shadow17과 같은 것입니다.

제 질문은 : Cluetip이 활성화되면 특정 동적 div의 ID를 어떻게 타겟팅합니까?

jQuery를 : (루프에서)

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.thumbnail').cluetip({ 
      fx: { 
       open: 'fadeIn', 
       openSpeed: '2000' 
      }, 

      showTitle: false, 
      cursor: 'pointer', 
      positionBy: 'auto', 
      height: '210px', 
      topOffset: 0, 
      leftOffset: 20, 
      local: true, 
      sticky: true, 
      mouseOutClose: true, 

      onActivate: function() { 
       $("#shadow").fadeIn(1000); 
      }, 

      onHide: function() { 
       $("#shadow").fadeOut(300); 
      } 
     }); 
    }); 
</script> 

HTML/PHP

<div id="shadow{$obj_id}" style="position: absolute; display:none;  
    width:150px; height:190px;"></div> 
<div class="thumbnail"> 
    <img src="/images/product.jpg" /> 
</div> 

실제 코드

<div id="shadow1"></div> 
<a href="/shoe-model-name.html"> 
    <span class="cm-template-box" template="common_templates/image.tpl" id="te3"> 
    <img class="cm-template-icon hidden" src="/skins/test/customer/images/icons/layout_edit.gif" width="16"  height="16" alt="" /> 
    <img class="thumbnail" rel="#popupz1" src="/images/product-tmb.jpg" width="150"  height="180" alt="" /></span> 
</a> 

Answer 1

당신은해야한다 사용하여 섀도우 요소를 참조 할 Attribute Starts With Selector 같은

$(this).closest('a').prev('div[id^="shadow"]'); 

이 배치 제 앵커 이전 요소를 선택하는 cluetip 트리거링 .thumbnail (즉 $(this)) 경우 그것. div이고 b. 그 id는 String "shadow"로 시작합니다. 표시 한 마크 업에 따라 이것이 작동해야합니다.

즉 :

onActivate: function(){ 
    $(this).closest('a').prev('div[id^="shadow"]').fadeIn(1000);        
}, 

onHide: function(){ 
    $(this).closest('a').prev('div[id^="shadow"]').fadeOut(300);        
} 

은 실제 마크 업 this working fiddle를 참조하십시오.

편집 : 당신은 왜 당신이 당신의 그림자 요소를 참조하는 클래스를 사용하지 않는 마크 업을 생성하는 PHP에 대한 액세스 권한을 갖고있는 것 같다 때문에? 당신은 다만 수

<div id="shadow8" class="cluetip-shadow" style="position: absolute; display:none; width:150px; height:190px;" ></div> 

<div class="thumbnail" > 
    <img src="/images/product.jpg" /> 
</div> 

: 혹시 같은 마크 업을 것

$(this).prev('.cluetip-shadow').doSth(); 

오히려 간단하기 때문에

귀하의 경우에 많은 차이를하지 않지만, 정말 도움이 얻을 수 상황이 더 커지고 복잡해지면