0

我有一个产品目录。当您滚动缩略图时 - 产品描述出现在工具提示 (Cluetip) 中。激活 Cluetip 时，我需要在相关图像周围出现阴影。

为此，我在图像周围创建了带有阴影的单独 div，这就是我在激活 Cluetip 时定位 div 的方式：

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

但问题是在我的情况下，CMS 会动态生成 div 的 ID，因此它们的名称有 #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>
4

1 回答 1

0

您应该能够使用Attribute Starts With Selector来引用您的影子元素，例如：

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

这会选择包裹线索提示触发.thumbnail（即$(this)）的第一个锚点的前一个元素，以防万一。是 adiv和 b。它的 id 以字符串“shadow”开头。根据您显示的标记，这应该可以工作。

IE：

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

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

使用您的实际标记查看此工作小提琴。

编辑：既然您似乎可以访问生成标记的 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-30T06:53:58.797 回答