javascript - 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 是数字。从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>