Question

我有一个产品目录。翻转缩略图时 - 产品说明出现在工具提示（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>

Answer 1

您应该可以使用 Attribute Starts With Selector 来引用您的阴影元素，如：

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

这选择前一个元素到包含cluetip-triggering .thumbnail（即$(this)）的第一个锚点，如果是a。是div和b。它的id以字符串“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();

在你的案例中没有太大的区别，因为它很简单，但是当事情变得更大更复杂时它会变得非常有用。

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

1 个答案: