一旦Cluetip激活，如何定位单独的动态div？

我有一个产品目录。当您翻转缩略图时 - 产品描述出现在工具提示（Cluetip）中。 Cluetip激活时，我需要在相关图像周围出现阴影。一旦Cluetip激活，如何定位单独的动态div？

对于我创建了全景图像阴影和单独的DIV这是我的目标股利时Cluetip激活：

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

但问题是在我的情况CMS动态生成div的标识，所以他们的名字像＃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>

来源

2012-03-30 Tim

触发工具提示的元素是否与阴影元素相关？你的标记是什么样的？ – m90 2012-03-30 06:30:28

刚添加标记。 – Tim 2012-03-30 06:47:26

我想达到像这样的效果：[链接]（http://www.gucci.com/us/category/f/women_s_shoes） – Tim 2012-03-30 06:51:15

你应该能够使用来指代你的影子元件Attribute Starts With Selector像：

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

这将选择前一个元素到第一锚包裹cluetip触发.thumbnail（即$(this)）的情况下，它一个。是一个div和b。其ID从字符串“影子”开始。基于你已经表明这应该是工作的标记。

即：

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();

不做出太大的差别在你的情况，因为它是相当简单的，但它可以得到真正的帮助当事情变得更大，更复杂时。

来源

2012-03-30 06:53:58 m90

@Tim无论如何，你应该可以使用'Attribute Starts With Selector'，唯一的区别是你必须知道元素是如何相关的。需要帮助，你将不得不添加实际的标记。 – m90 2012-03-30 07:18:12

更新了市场。 – Tim 2012-03-30 07:26:09

一旦Cluetip激活，如何定位单独的动态div？

回答

相关问题