Question

您好我想创建一个滚动到下一个元素的滑块。

我正在使用<ul>和众多<li>标记，我的所有内容都完全按照我的要求设置，但JS在控制台中返回以下错误：

Uncaught TypeError: Cannot read property 'left' of undefined

我所拥有的JS位于下方或查看jsFiddle：

var currentElement = $("li .listofyears:first");

// completely ignoring boundaries

$("#NavigateBackward").click(function() {
    currentElement = currentElement.prev();
    scrollTo(currentElement);
});

$("#NavigateForward").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $(window).scrollLeft(element.position().left);   
}

我的html如下：

<div id="years_arrows">
            <span class="nav_arrows" ><img src="http://iconify.it/wp-content/icons-large-alt/arrow-left.png" id="NavigateBackward" /></span>
         <span class="nav_arrows aaa" ><img src="http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg" id="NavigateForward"/></span>
       <div id="slider">
        <div id="yearslistwrapper">
                <ul class="yearslist">
                    <li class="listofyears"><a href="#">2003</a></li>
                    <li class="listofyears"><a href="#">2004</a></li>
                    <li class="listofyears"><a href="#">2004</a></li>
                    <li class="listofyears"><a href="#">2005</a></li>
                    <li class="listofyears"><a href="#">2006</a></li>
                    <li class="listofyears"><a href="#">2007</a></li>
                    <li class="listofyears"><a href="#">2008</a></li>
                    <li class="listofyears"><a href="#">2009</a></li>
                    <li class="listofyears"><a href="#">2010</a></li>
                    <li class="listofyears"><a href="#">2011</a></li>
                    <li class="listofyears"><a href="#">2012</a></li>                       
                    <li class="listofyears"><a href="#">2013</a></li>
                </ul> <!-- END UL yearslist -->
            </div> <!--End slider-->

                </div> <!-- End years_arrows div -->

Answer 1

这有效：

var currentElement = $("li.listofyears").first();
// completely ignoring boundaries

$("#NavigateBackward").click(function() {
    currentElement = $(currentElement).prev();
    scrollTo(currentElement);
});

$("#NavigateForward").click(function() {
    currentElement = currentElement.next();
    scrollTo(currentElement);    
});

function scrollTo(element) {
    $('.yearslist li').show();
    $('.yearslist li').not(element).hide();
}

分叉小提琴http://jsfiddle.net/QYmKJ/

Answer 2

您的选择器不正确，因此不匹配任何元素。如果您调用previous()的jQuery对象为空（不包含匹配的元素），则返回undefined。

你的选择器：

$("li .listofyears:first");

那里正在寻找第一个元素listofyears 一个<li>元素。但是，您希望第一个<li>元素包含该类，因此请删除空格：

$("li.listofyears:first");

此后还有其他问题需要解决。例如，如果在查看第一个元素时单击上一个按钮，则不会有要查找的上一个元素，并且您将遇到相同的问题。你需要围绕它编写代码（如果没有前一个元素，可能什么都不做）。

Answer 3

您正以错误的方式访问您的li

行

var currentElement = $("li .listofyears:first");

应该是

var currentElement = $("li.listofyears:first");

您的代码正在<li>标记＆amp;内找到包含类listofyears的元素不是<li>标记类listofyears。

在这里查看小提琴http://jsfiddle.net/qafjM/

jQuery滚动到下一个元素，未捕获类型错误

3 个答案: