1

深刻な助けが必要です。バウンス効果を作成しようとしていますが、アンカーテキストクラス/divでは機能しません。

これは私が使用したコードです：http：//viralpatel.net/blogs/jquery-bounce-effect-bounce-html-js/

非常にシンプルで短いチュートリアルに基づいています。現在の問題は、JavaScriptコードがアンカー/リンク内にあるクラスまたはdivをターゲットにすることができないことです。

実際にこれを解決するにはどうすればよいですか？コードは上のWebサイトにあり、バウンスしようとしているコードのセクションは太字で強調表示されています。

                <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>

編集：この問題を解決することは不可能だと思います。これは今でも解決できるのだろうか。クラスがバウンスするたびに背景が削除されます。

4

3 に答える 3

0

現在の問題は、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);

    });
});
于 2012-07-31T10:37:56.890 に答える
0

これはどう

$(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/

于 2012-07-31T11:25:06.417 に答える
0

バウンス効果が表示される前にページを更新するなど、リンクのデフォルトの動作を妨げていません。

私は次のことを試してみます：

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

問題のアンカー タグにバインドされている他のイベントがある場合は、e.stopPropagation(); を削除してください。電話。

編集 divについても同じ問題について言及していることに気づきました。jQuery の document.ready ハンドラーでコードをラップしていますか?

$(function() {
    $('#jp_interface_1 a').click(function(e) {
        e.preventDefault(), e.stopPropagation();
        $(this).effect("bounce", { times:5 }, 300);
    });
});
于 2012-07-31T10:35:18.153 に答える