문제

페이지의 뉴스 섹션에 대한 뉴스 티커를 사용하고 있습니다.이 뉴스로 PrettyPhoto Plugin을 사용하고 싶지만

  • 항목이 위치를 변경하면 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>
    
    .

    이 일을 일으킬 수 있는지 또는이를 고치는 방법은 무엇입니까?

    편집 :
    jQuery HTML 선택기로 인해 문제가 발생합니다.

  • 도움이 되었습니까?

    해결책 3

    jQuery 함수 shuld가 사용될 기능 내에 선언되어 드시든지 마침내 솔루션을 발견했습니다.

    여기에 코드가 있습니다

    $(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'
        });
    });
    
    .

    다른 팁

    DOM READY 이벤트 외부에서 변수 및 기능 선언을 가져옵니다. http://jsfiddle.net/jfahv/

    jQuery의 ": 첫 번째"선택기는 첫 번째 자식 요소가 아닌 첫 번째 일치 요소를 반환합니다.대신 첫 번째 자식을 사용해보십시오.

    라이센스 : CC-BY-SA ~와 함께 속성
    제휴하지 않습니다 StackOverflow
    scroll top