0

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

我正在使用一个<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 -->
4

3 回答 3

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/

于 2013-10-10T15:40:53.790 回答
0

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

您的选择器：

$("li .listofyears:first");

listofyears 那是在元素中寻找类的第一个<li>元素。但是，您想要<li>该类的第一个元素，因此请删除空格：

$("li.listofyears:first");

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

于 2013-10-10T15:29:20.427 回答
0

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

线

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

应该

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

您的代码正在寻找标签内带有类 listofyears 的元素，<li>而不是<li>带有类 listofyears 的标签。

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

于 2013-10-10T15:29:25.557 回答