1

JavaScript を学習していますが、スクリプトが機能しない理由がわかりません。imageIn および imageOut 関数がカウンター変数にアクセスできないためだと思います。これを修正するにはどうすればよいですか？imageIn と imageOut の両方で、エラー コンソール「未定義」にエラーが表示されます。

<style type="text/css">

ul {
    list-style-type:none;
}

</style>

<body>

<div id="slideShow">

    <ul>
        <li>
            <img src="stockboat.png" alt="Steam Boat" id="boat" />
        </li>   
    </ul>

</div>

<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">

    var image = document.getElementsByTagName('img');

    for (i = 0, ii = image.length; i < ii; i++)  {
        image[i].style.opacity = "0.5";
        image[i].addEventListener('mouseover', imageIn, 'false');
        image[i].addEventListener('mouseout', imageOut, 'false');   
    }

    function imageIn() {
        image[i].style.opacity = "1";   
    }

    function imageOut() {
        image[i].style.opacity = "0.5";
    }
</script>

</body>
</html>
4

5 に答える 5

0

<script type="text/javascript" src="getElementsByClassName.js"></script>スクリプトの残りの部分の実行を停止させるエラーが発生している可能性があります。

ここで述べた回答に加えて、他のアドバイスを提供します。

  1. カウンター変数を定義します: var i = 0, ii = image.length. そうしないと、すでに設定されているグローバル i および ii 変数を使用してしまう可能性があります....
  2. Chrome Developer Toolsなどのインスペクターを使用して、JS コードの問題を見つけます。
  3. 要素のスタイルを変更するのではなく、CSS クラスを追加および削除します。これにより、少ない労力で複数のスタイル変更を行うことができます。
  4. コードでEvent Delegationを利用する方法を学びましょう。これは長期的には、特に動的コンテンツの利用を開始したい場合に役立ちます。

あなたの学習を頑張ってください。

また、コードを機能させる限り、いくつかの変更を加えてコードを使用するこの jsFiddle を見ることができます: http://jsfiddle.net/b9Fua/

于 2012-04-21T20:59:15.553 に答える
0

jQuery は信じられないほど時間を節約し、直感的です。使い捨て機能に慣れる必要があります。見てみな！http://jsfiddle.net/wgxZu/1/

<style type="text/css">

ul {
    list-style-type:none;
}

</style>

<body>

<div id="slideShow">

    <ul>
        <li>
            <img src="http://placekitten.com/100/100" alt="Steam Boat" id="boat" />
        </li>   
        <li>
            <img src="http://placekitten.com/200/100" alt="Steam Boat" id="boat" />
        </li>   
        <li>
            <img src="http://placekitten.com/300/60" alt="Steam Boat" id="boat" />
        </li>   
    </ul>

</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

    var image = document.getElementsByTagName('img');

    for (i = 0, ii = image.length; i < ii; i++)  {
        image[i].style.opacity = "0.5";
        $(image[i]).hover(function(){$(this).css({"opacity":"1.0"})},
                          function(){$(this).css({"opacity":"0.5"})});
    }
</script>

</body>
</html>
于 2012-04-21T21:04:01.340 に答える
0

要素にアクセスする前に、dom の読み込みが完了するまで待つ必要があります。コードを次のようにラップします。

window.addEventListener('load', function () {
    . . . // Your code
});

さらに、i変数は と の両方のクロージャでラップされimageInますimageOut。これは、いずれかの画像が mouseover または mouseout イベントを受け取るたびに、 のリストの最後の画像の不透明度が常に変化することを意味しますimages。

これを修正するには、スコープを関数にバインドします。

image[i].addEventListener('mouseover', imageIn.bind(image[i]), false);

次に、imageIn関数で次のようにします。

this.style.opacity = "1";

最後のポイント: 'false'addEventListener の 3 番目の引数として文字列を渡します。JavaScript では、空でない文字列はすべて true と評価されるため、false代わりにブール値を渡してイベントのバブリングを防ぐ必要があります。

于 2012-04-21T21:05:41.387 に答える
0

反復変数を認識していないのは正しいと思います。次のことを行う必要があります。

参照オブジェクトを使用:

function imageIn() {
    this.style.opacity = "1";         // use "this" instead of image array
}

function imageOut() {
    this.style.opacity = "0.5";        // use "this" instead of image array
}

-また-

閉鎖アプローチ:

image[i].addEventListener('mouseover'
                         , (function(obj){return function(){imageIn(obj)};})(image[i])
                         , 'false');
image[i].addEventListener('mouseout'
                         , (function(obj){return function(){imageOut(obj)};})(image[i])
                         , 'false');

関数定義を変更する必要があります:

function imageIn(obj) {          // added parameters "obj"
    obj.style.opacity = "1";   
}

このメソッドを使用すると、ループ変数を参照できます。これは、ループ内で setTimeOut を使用する場合の例として役立つため、後でコードを再利用できます:)

于 2012-04-21T20:52:23.187 に答える
0

jsfiddleを試して、2 つの関数 ImagineIn と imageOut を、それらを使用するコードの前に置くことができます。

于 2012-04-21T20:52:54.533 に答える