Cluetip激活后，如何定位單獨的動態div？

Question

我有一個產品目錄。 將鼠標懸停在縮略圖上時-工具說明（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

您應該能夠使用“ 以選擇器開頭 ” 屬性來引用陰影元素：

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

這將選擇第一個錨點的前一個元素，以包裹提示觸發的.thumbnail （即$(this) ）。 是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);                               
}

看到這個工作的小提琴與您的實際標記。

編輯 ：既然您似乎可以訪問生成標記的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();

因為它很簡單，所以對您的情況沒有多大影響，但是當事情變得越來越大和越來越復雜時，它會真正有用。