jQuery添加類不起作用

Question

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

誰能幫助我

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> 

Answer 1

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

您需要將代碼包裝在$(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>