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");

<li>あなたのコードは、クラスlistofyearsのタグではなく、タグ内のクラスlistofyearsを持つ要素を探しています<li>。

ここでフィドルをチェックしてくださいhttp://jsfiddle.net/qafjM/

于 2013-10-10T15:29:25.557 に答える