2

ページのニュースセクションにニュースティッカーを使用していて、これらのニュースでprettyphotoプラグインを使用したいのですが、<li>アイテムの位置が変わると、jquery関数が機能しません。

たとえば、最初のアイテムが最後になると、jquery関数は機能しません

これがコードです

$(document).ready(function(){
    var first = 0;
    var speed = 1000;
    var pause = 3500;

    function removeFirst(){
       first = $('ul#listticker li:first').html();
       $('ul#listticker li:first')
        .animate({opacity: 0}, speed)
        .fadeOut('slow', function() {$(this).remove();});
       addLast(first);
    }

    function addLast(first){
        last = '<li style="display:none">'+first+'</li>';
        $('ul#listticker').append(last)
        $('ul#listticker li:last')
        .animate({opacity: 1}, speed)
        .fadeIn('slow')
    }

    interval = setInterval(removeFirst, pause);

        //Codes above are for the news ticker

    $(".news").click(function(e){
        e.preventDefault(); //I assign news class to links if there is no image for the news on db but it doesn't even work
    });

    $("#newsdiv a[rel^='gallery']").prettyPhoto({
        theme:'light_rounded'
    });
});

そして、php関数のHTML結果

<ul id="listticker">
    <li>
        <img src="http://example.com/m.../k_haber.png"><a href="#" class="news">12.05.2011</a><span class="news-text">Some Title</span>
    </li>
    <li>
        <img src="http://example.com/../some.png"><a href="http://example.com/../news/p_some.jpg" class="news-title" rel="gallery[dd0]"> 12.05.2011</a><span class="news-text">Some Other Title</span>
    </li>
</ul>

これを引き起こしている可能性があるもの、またはそれを修正する方法について何か考えはありますか？

編集：
問題はjqueryhtmlセレクターが原因で発生すると思います。

4

3 に答える 3

0

Jquery関数は、使用される関数内で宣言する必要があることに気づいたので、最終的に解決策を見つけました。

これがコードです

$(document).ready(function(){
    var first = 0;
    var speed = 1000;
    var pause = 3500;

    function removeFirst(){
       first = $('ul#listticker li:first').html();
       $('ul#listticker li:first')
        .animate({opacity: 0}, speed)
        .fadeOut('slow', function() {$(this).remove();});
       addLast(first);
    }

    function addLast(first){
        last = '<li style="display:none">'+first+'</li>';
        $('ul#listticker').append(last)
        $('ul#listticker li:last')
        .animate({opacity: 1}, speed)
        .fadeIn('slow',function(){
            $("a[rel^='gallery']").click(function() {
                $.prettyPhoto.open($(this).attr("href"),"","");
                return false;
            });
        });
        $(".news").click(function(e){
            e.preventDefault(); 
        });
    }

    interval = setInterval(removeFirst, pause);


    $("#newsdiv a[rel^='gallery']").prettyPhoto({
        theme:'light_rounded'
    });
});
于 2011-05-13T10:53:38.730 に答える
0

domreadyイベントの外で変数と関数宣言を取得します。http://jsfiddle.net/jfahv/

于 2011-05-12T18:35:44.843 に答える
0

jQueryの「：first」セレクターは、最初の子要素ではなく、最初に一致した要素を返します。代わりに：first-childを使用してみてください。

于 2011-05-12T18:46:44.633 に答える