Question

我试图让这个轮播使用jQuery严格模式工作，当点击prev和下一个按钮时没有任何响应和奇怪的部分是控制台中没有错误。我错过了代码中的内容。

HTML：

<!doctype html>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Micah FED Conclusive Exercise</title>

    <link rel="stylesheet" type="text/css" href="inc/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="inc/css/base.css" />
    <script src="inc/js/vendor/jquery.min.js"></script>
    <script src="inc/js/base.js"></script>

</head>
<body>
    <header>
        <nav>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
            </ul>
        </nav>
        <h2 class="logo">LOGO</h2>
    </header>
    <div class="page-content">
        <section class="main-carousel">
            <div class="carousel-next">&gt;</div>
            <div class="carousel-prev">&lt;</div>
            <div class="carousel-cells">
                <article>
                    <div class="slide-text">
                        <h1>Slide One</h1>
                        <p>A slide about sliding slides.</p>
                    </div>
                </article>
                <article>
                    <div class="slide-text">
                        <h1>Slide Two</h1>
                        <p>A slide-sliding slider sliding slides.</p>
                    </div>
                </article>
                <article>
                    <div class="slide-text">
                        <h1>Slide Three</h1>
                        <p>A slide-sliding slider sliding slides.</p>
                    </div>
                </article>
            </div>
        </section>
        <section class="column-content">
            <h1>Three Columns</h1>
            <div class="three-columns">
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
                <aside class="list-block">
                    <h3>List Heading</h3>
                    <ul>
                        <li>List Item</li>
                        <li>List Item</li>
                        <li>List Item</li>
                    </ul>
                </aside>
            </div>
        </section>
    </div>
</body>

这是jQuery位，而不是我必须使用严格模式。哪个我觉得很难

jQuery：

(function() {

var Carousel = {
    props:{
        current_slide:1,
        total_slides:3
    },
    init:function(){
        Carousel.next();
        Carousel.previous();
    },
    bindEvents:function(){
        $(".carousel-next").on("click",function(){
            alert('next');
            Carousel.next();
        });
        $(".carousel-prev").on("click",function(){
            Carousel.previous();
        });
    },
    next:function(){
        this.props.current_slide += 1;
    },
    previous:function(){
        this.props.current_slide -= 1;
    },
    update:function(){

    }
}
$(function(){
    Carousel.init();
})

}）（窗口）;

Carsouel没什么用，js代码没有错误

0 个答案: