jQuery Add Class不起作用

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;
    }
});

show class的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是数字.从 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>