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 */} ); block 中。

它在 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 and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

   所以你应该有一个 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>