jQuery跳動效果不適用於應用於錨標簽的類

Question

我需要一些認真的幫助。 我正在嘗試創建反彈效果，但是在錨文本類/ div上不起作用。

這是我使用的代碼： http : //viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/

它基於一個非常簡單而簡短的教程。 現在的問題是，我無法使javascript代碼定位到定位符/鏈接內的類或div。

我該如何解決呢？ 該代碼在上面的網站中，我試圖反彈的代碼部分以粗體突出顯示：

                <div id="jplayer">
    </div>
    <div class="jp-audio">
      <div class="jp-type-single">
        <div id="jp_interface_1" class="jp-interface">
        <ul class="jp-controls">
            <li><a href="#" **class="jp-play"**></a></li>
            <li><a href="#" class="jp-pause"></a></li>
            <li><a href="#" class="jp-prev"></a></li>
            <li><a href="#" class="jp-next"></a></li>
            <li><a href="audio_samples.php" class="jp-more-songs">Listen to more Audio Samples</a></li>
        </ul>
          <div class="jp-progress">
            <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
            </div>
        </div>
        <div class="jp-title"></div>
        </div>

編輯：我認為這個問題無法解決。 我想知道現在這是否可以解決。 每當班級反彈時，背景就會被刪除。

Answer 1

您沒有阻止鏈接的默認行為，因此它會在看到反彈效果之前刷新頁面。

我會嘗試以下方法：

$('#jp_interface_1 a').click(function(e) {
    e.preventDefault(), e.stopPropagation();
    $(this).effect("bounce", { times:5 }, 300);
});

請注意，如果還有其他事件綁定到有問題的錨標記，請刪除e.stopPropagation（）;。 呼叫。

編輯我剛剛注意到您提到了divs的相同問題。 您是否將代碼包裝在jQuery的document.ready處理程序中？

$(function() {
    $('#jp_interface_1 a').click(function(e) {
        e.preventDefault(), e.stopPropagation();
        $(this).effect("bounce", { times:5 }, 300);
    });
});

Answer 2

現在的問題是，我無法使javascript代碼定位到定位符/鏈接內的類或div。

 <div class="div1">  div text
  <a class="ancClass" href="#">Back</a>  
  </div>

...這將幫助您找到

 $('.div1 a.ancClass');

反之亦然

編輯：我不明白您正在努力實現的目標，這就是您正在努力的目標嗎？

$(document).ready(function(){  
 $('.jp-interface a.jp-next').click(function(e) {         
    $('.jp-more-songs').effect("bounce", { times:5 }, 300);

    });
});

Answer 3

這個怎么樣

$(document).ready(function(){  
    $('#jp_interface_1 .jp-more-songs').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
        $(this).effect("bounce", { times:5 }, 300);
    });
})

http://jsfiddle.net/96kXt/23/