0

次のページでcapSlideというjqueryスクリプトを使用しています

http://sundial.whistlerwebhosting.com/meetings-events/whistler-weddings

ユーザーが画像の上にマウスを置くと、透明なオーバーレイが上部に表示され、キャプションがタイトルと詳細リンクとともに上にスライドします。

div領域全体をクリック可能にしたい。オーバーレイがこのdivの上に表示されるので、リンクをアクティブにする必要があると思います。次のjqueryスクリプトを使用しようとしていますが、機能しません。

jQuery('.overlay').click(function(){
     window.location=jQuery(this).parent().find('a').attr('href'); 
       return false;
});

HTML出力は次のとおりです

<div class="ic_wrapper">
   <div id="capslide_img_cont11" class="ic_container"><img typeof="foaf:Image" src="/sites/all/themes/sundial/images/weddings/Wedding-Consulants.jpg" width="290" height="180" alt="Whistler Wedding Consulants" />
    <div class="overlay" style="display:none;"></div>
    <div class="ic_caption">
      <h3>Wedding Consulants</h3>
      <a href="/meetings-events/whistler-weddings/wedding-planners">
      <p class="ic_text">More Info</p>
       </a> </div>
   </div>
</div>

どんな洞察も大歓迎です

4

2 に答える 2

0

スクリプトの実行後にオーバーレイdivが追加されるため、クリックイベントは登録されていないと想定します。on()またはdelegate()jQuery関数を使用してみてください。例：

 jQuery(".ic_container").on("click", ".overlay", function(){
        window.location = jQuery(this).parent().find('a').attr('href'); 
        return false;
 });
于 2012-07-13T00:04:48.540 に答える
0

スクリプト ファイル (functions.js) で、クリック ハンドラーをドキュメント準備完了関数の外に設定しています。代わりに、 ready 関数内に配置します。

jQuery(document).ready(function() {
    jQuery('div#block-menu-menu-meeting-events-right.block div.content ul.menu li.last a').addClass('fancybox.iframe');

    // Your code has been moved to here...
    jQuery('.overlay').click(function(){
        window.location=jQuery(this).parent().children().find('a').attr('href'); 
        return false;
    });    
});

これにより、クリック ハンドラーを適用する前に、ページの準備が整うまで待機します。

于 2012-07-13T00:58:24.560 に答える