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

原因是

如果您需要使用不同版本的jQuery，或者正在使用覆盖$变量的库，则上述此函数将不受更改影响
声明的每个变量（即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);

** 更新 **

在进一步阅读你的代码之后，我只能看到（如评论）一些奇怪的东西。

您的ID是数字。 From HTML specification，

ID和NAME令牌必须以字母（[A-Za-z]）开头，可能是后跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句点（“。”）。

所以你应该是一个id前缀......或者你的选择基于元素索引

您可以将查询链接起来，而不是一直重新解析它们。

例如

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>

jQuery Add Class不起作用

1 个答案: