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（全局）名稱空間，並且在需要時具有正確的值。 （如果需要訪問函數外部的內容，請公開一個全局對象（例如： 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是數字。 根據 HTML 規范 ，

   ID和NAME令牌必須以字母（[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（不再需要ID）

<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>