2013-02-05 37 views
1

當我點擊類「箭頭右」或「箭頭左」的div時,我想添加一個類到對象。 在http://jsfiddle.net/它工作完美。但是,在我的網站不工作:(jQuery添加類不起作用

誰能幫助我

jQuery的:

var currentPage = 0; 
var lastPage = ($(".post-preview > div").length)-1; 
currentPage = $('.post-preview > div.show').attr('id'); 

$('.news > .right').stop().click(function() { 
    if (currentPage == lastPage) { 
      $('.post-preview > div#' + lastPage).hide(); 
      $('.post-preview > div#' + lastPage).removeClass('show'); 

     $('.post-preview > div#0').fadeIn(300); 
     $('.post-preview > div#0').addClass('show'); 
     currentPage = 0; 
    } else { 
     $('.post-preview > div#'+currentPage).hide(); 
     $('.post-preview > div#'+currentPage).removeClass('show'); 
     currentPage++; 
     var nextPage = currentPage; 
     currentPage--; 
     $('.post-preview > div#'+nextPage).fadeIn(300); 
     $('.post-preview > div#'+nextPage).addClass('show'); 
     currentPage = nextPage; 
    } 
}); 

$('.news > .left').stop().click(function() { 
    if (currentPage == 0) { 
     $('.post-preview > div#0').hide(); 
     $('.post-preview > div#0').removeClass('show'); 

     $('.post-preview > div#' + lastPage).fadeIn(300); 
     $('.post-preview > div#' + lastPage).addClass('show'); 
     currentPage = lastPage; 
    } else { 
     $('.post-preview > div#'+currentPage).hide(); 
     $('.rpost-preview > div#'+currentPage).removeClass('show'); 
     currentPage--; 
     var nextPage = currentPage; 
     currentPage++; 
     $('.post-preview > div#'+nextPage).fadeIn(300); 
     $('.post-preview > div#'+nextPage).addClass('show'); 
     currentPage = nextPage; 
    } 
}); 

CSS的表演類:

.news > .post-preview > div.show { display: inline-block !important; } 

我的HTML代碼:

<div class="news"> 
<div class="arrow left"></div> 
    <div class="post-preview"> 
     <div id="0" class='show'></div> 
     <div id="1"></div> 
     <div id="2"></div> 

    </div> 
<div class="arrow right"></div> 
</div> 
+0

你導入jQuery的正確?你把劇本放在身體的盡頭嗎? –

+2

您可能過早執行JavaScript,即DOM準備就緒之前。請閱讀[** jQuery教程**](http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery),它會告訴您如何設置jQuery。爲了幫助您或提供更好的建議,我們必須知道「不起作用」的含義。你看到的行爲是什麼以及你期望的行爲是什麼? –

+3

如果你有一個jsfiddle,你應該更好地顯示一個到你的代碼的鏈接,而不是jsfiddle主頁。 –

回答

4

您正在嘗試訪問執行時可能不存在的元素。這就是爲什麼它不起作用。

您需要將代碼包裝在$(function() { /* put code here */ });塊中。

它在jsfiddle上工作的原因是因爲該網站爲您提供方便。

** 編輯 **

在JavaScript中,這是一個很好的(如果不是最好的)的做法包圍它自己的上下文中的代碼。看看jQuery,jQuery UI和許多JavaScript小部件和庫。例如:

(function($) { // receive $ as parameter; a jQuery instance 

    /* place code here 

})(jQuery); // invoke the function above with this instance of jQuery 

這樣做的原因是

  1. 如果需要使用不同版本的jQuery的,或正在使用的覆蓋$變量庫,這個函數上面會受到變化的影響
  2. 聲明的每個變量(即var x = "foo";)將而不是在函數外部可用,因此您可以確定您沒有污染窗口(全局)名稱在你需要的時候保持正確的價值。如果你需要的功能之外獲取的東西(揭露一個全局對象(例如:window.someVar = localVar;

然而,上述功能將得到,因爲它是由瀏覽器加載執行,任何DOM之前可能會執行元素被插入到DOM樹中,這對於設置事件監聽器等的腳本來說可能是一個問題,因此,如果你需要在DOM元素被完全加載並準備使用時執行的函數只有,代碼在jQuery onload回調中:

jQuery(function() { 

    /* place code here */ 

}); 

甚至

(function($) { 
    // executed right now 

    $(function() { 
     // executed only when the DOM is ready 

     /* place code here */ 

    }); 

})(jQuery); 

** 更新 **

閱讀你的代碼遠一點,我只能看到(如評論)的一些奇怪的事情。

  1. 您的ID是數字。 From的HTML specification

    ID和名稱標記必須以字母開頭([A-ZA-Z]),並且可以是 後跟任意數量的字母,數字([0-9]),連字符(「 - 」), 下劃線(「_」),冒號(「:」)和句點(「。」)。

    所以,你應該一個一個ID前綴......或者立足於元素的索引選擇

  2. 你可以連續使用您的查詢,而不是重新分析他們所有的時間。

例如

jQuery(function() { 

var firstPage = $(".post-preview > div:first").index(); // index of the first page 
var lastPage = $(".post-preview > div:last").index(); // index of the last page 
var currentPage = $('.post-preview > div.show').index() || firstPage; // default to 0 

$('.news > .right').stop().click(function() { 
    if (currentPage == lastPage) { 
     currentPage = $('.post-preview > div:eq(' + lastPage + ')') 
      .hide() 
      .removeClass('show') 
      .siblings('div:first') // first DIV 
      .fadeIn(300) 
      .addClass('show') 
      .index(); // should be 0... but we never know 
    } else { 
     // note : will receive the next element index 
     currentPage = $('.post-preview > div:eq(' + currentPage + ')') 
      .hide() 
      .removeClass('show') 
      .next('div')    // get next DIV element 
      .fadeIn(300) 
      .addClass('show') 
      .index(); 
    } 
}); 

$('.news > .left').stop().click(function() { 
    if (currentPage == firstPage) { 
     currentPage = $('.post-preview > div:eq(' + currentPage + ')') 
      .hide() 
      .removeClass('show') 
      .siblings('div:last') // last DIV 
      .fadeIn(300) 
      .addClass('show') 
      .index(); 
    } else { 
     currentPage = $('.post-preview > div:eq(' + currentPage + ')') 
      .hide() 
      .removeClass('show') 
      .prev('div') 
      .fadeIn(300) 
      .addClass('show') 
      .index(); 
    } 
}); 

}); 

和你的HTML(無需再標識)

<div class="news"> 
<div class="arrow left"></div> 
    <div class="post-preview"> 
     <div class='show'>Preview 1</div> 
     <div>Preview 2</div> 
     <div>Preview 3</div> 
    </div> 
</div> 
</div> 
+0

是的,我添加$(文檔).ready(功能(){這裏我的代碼}); – DerFuchs10

+0

在這裏我的jsfiddle鏈接:http://jsfiddle.net/mD3sy/ – DerFuchs10

+0

愛你:)非常感謝! – DerFuchs10