Jqueryスライドショーを自動作成する

Question

私はちょっとしたスライドショーを作ったので、私はそれを自動化しようとしています。 HTML要素は、このようなものです：ここでは

<ul> 
    <li> 
    <h3 class="active-item" data-bg="background-image url">Title 1</h3> 
    <div class="news-excerpt"><p>The excerpt</p></div> 
    </li> 

    <li> 
    <h3 class="" data-bg="background-image url">Title 2</h3> 
    <div class="news-excerpt"><p>The excerpt</p></div> 
    </li> 

    <li> 
    <h3 class="" data-bg="background-image url">Title 3</h3> 
    <div class="news-excerpt"><p>The excerpt</p></div> 
    </li> 
</ul> 

は私のスライドショーです：

$("#alternative-navigation div#last-posts-fadeshow h3").click(function(){ 
    // Get url of the background image to show. 
    var bgvar = $(this).attr("data-bg"); 

    // Set the right post excerpt to show 
    $('.active-excerpt').removeClass('active-excerpt'); 
    $(this).next('.news-excerpt').addClass('active-excerpt'); 
    $('.active-item').removeClass('active-item'); 
    $(this).addClass('active-item'); 
    Cufon.refresh(); 
    //alert (bgvar); 

    // Switch to right background image 
    $("#background-image-container").fadeTo('medium', 0.1, function() 
    { 
     $("#background-image-container").css("background-image", "url(" + bgvar + ")"); 
    }).fadeTo('medium', 1); 
    return false; 
}); 

は今、私はそれがautomaticaly 4秒ごとを続行します。どのように私はそれを働かせることができます：

$('html').addClass('js'); 

$(function() { 

    var timer = setInterval(showDiv, 3000); 

    function showDiv() { 

     // Select the next post to show 
     $(this) = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3'); 

     // Get url of the background image to show. 
     var bgvar = $(this).attr("data-bg"); 

     // Set the right post excerpt to show 
     $('.active-excerpt').removeClass('active-excerpt'); 
     $(this).next('.news-excerpt').addClass('active-excerpt'); 
     $('.active-item').removeClass('active-item'); 
     $(this).addClass('active-item'); 
     Cufon.refresh(); 
     //alert (bgvar); 

     // Switch to right background image 
     $("#background-image-container").fadeTo('medium', 0.1, function() 
     { 
      $("#background-image-container").css("background-image", "url(" + bgvar + ")"); 
     }).fadeTo('medium', 1); 
     return false;  
    } 

}); 

最初の部分は右のタイトルを選択するようだが何も起こりません。何か案は？

Answer 1

$()またはjQuery()は変数ではありません。$(this) = '...';を使用して上書きすることはできません。 $()は、セレクタによってフィルタリングされた要素のセットを返す関数です。参照：.jQuery()

代わりの$(this)を上書きしようとすると、ちょうど例えば、新しい変数を作成します。

function showDiv() { 

    // Select the next post to show 
    var el = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3'); 

    // Get url of the background image to show. 
    var bgvar = el.attr("data-bg"); 

    // Set the right post excerpt to show 
    $('.active-excerpt').removeClass('active-excerpt'); 
    el.next('.news-excerpt').addClass('active-excerpt'); 
    $('.active-item').removeClass('active-item'); 
    el.addClass('active-item'); 
    Cufon.refresh(); 
    //alert (bgvar); 

    // Switch to right background image 
    $("#background-image-container").fadeTo('medium', 0.1, function() 
    { 
     $("#background-image-container").css("background-image", "url(" + bgvar + ")"); 
    }).fadeTo('medium', 1); 
    return false;  
} 

そしてループにバックを開始するには、それはあなたのHTMLの構造に依存するが、このようなものがすべき仕事

var el = $('#alternative-navigation div#last-posts-fadeshow h3.active-item').parent().next().find('h3'); 
if (el.length == 0) 
    el = $('#alternative-navigation div#last-posts-fadeshow').first().find('h3');