0

http://mozilla.github.io/brick/demos/slidebox/index.htmlを使用しようとしています。以下は私のコードです。スライド 1 は正常に読み込まれていますが、次のボタンをクリックすると次のエラーが発生します。親切に助けて!!!

ReferenceError: slidebox is not defined

私は何が間違っていたのか混乱していますか？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-US" class="csstransforms csstransforms3d csstransitions" slick-uniqueid="3">
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/brick-1.0beta8.byob.min.css"/>
<script type="text/javascript" src="js/brick-1.0beta8.byob.min.js"></script>

<script>


$(document).ready(function() { 

// go back a slide
prevButton.addEventListener("click", function(){
   slidebox.slidePrevious(); 
});

// go forward a slide
nextButton.addEventListener("click", function(){
   slidebox.slideNext(); 
});

// jump to slide 6
slideToButton.addEventListener("click", function(){
   slidebox.slideTo(6); 
});

 });

</script>

<head>
<body>
<x-slidebox orientation="x">
    <x-slides>
        <x-slide>Slide 0</x-slide>
        <x-slide selected>Slide 1
        </x-slide>
        <x-slide>Slide 2</x-slide>
        <x-slide>Slide 3</x-slide>
        <x-slide>Slide 4</x-slide>
        <x-slide>Slide 5</x-slide>
        <x-slide>Slide 6</x-slide>
    </x-slides>
</x-slidebox>

<button id="nextButton" class="btn btn-default nextButton">Next</button>
<button id="slideToButton" class="btn btn-default slideToButton">Pre</button>

<button id="prevButton" class="btn btn-default prevButton">Pre</button>
<button onclick="ab();" id="pre" class="pre">Next</button>
</body>
</html>
4

1 に答える 1

1

最初にスライドボックスを照会する必要があります。イベント リスナーをアタッチする前に、これを追加します。

var slidebox = $('x-slidebox')[0];

また、ボタンを使用する前にクエリを実行する必要があります。

$('nextButton').addEventListener("click", function(){
   slidebox.slideNext(); 
});

動作するはずの完全な js コードを次に示します。

https://gist.github.com/pennyfx/6896373

上で述べたように、欠落している部分は、使用する前に DOM からスライドボックスとボタン要素を選択する必要がある場所です。Brick の作成者は、その部分が明らかであると考え、チュートリアルから除外したと想定しています。

于 2013-10-08T23:18:23.130 に答える