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

次のような属性で始まるセレクターを使用して、シャドウ要素を参照できるはずです。

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

これにより、前の要素が最初のアンカーに選択され、それがaの場合に、手がかりトリガー.thumbnail（つまり$(this)）をラップします。adivと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();

かなり単純なので、ケースに大きな違いはありませんが、物事が大きく複雑になったときに非常に役立ちます。

于 2012-03-30T06:53:58.797 に答える