1

私のページには一定量のリンクがあります。各リンクのHref属性は画像に関連付けられています。したがって、特定のリンクにカーソルを合わせると、適切な画像が表示されます。このプロセスを自動化し、リンクが次々と 5 秒間マウス ホバーされるようにしたいと考えています。私はこれを試しましたが、うまくいきません：

 function circulate(){
  $('.circulating-links').each(function(){
      $(this).trigger('mouseover'); 
  });
 }

上記のコードを $(document).ready() に入れましたが、結果が表示されません。しかし、ここには少しニュアンスがあります。以下の関数をこれらのリンクの「onmouseover」属性に割り当てると、アラートが表示されます。

function showAlert()
{
  alert("Hello");
}

これをすべてラップするには：マウスでリンクをマウスオーバーすると、画像が変化するのがわかります。しかし、マウスオーバー イベントをトリガーすると、同じ結果が得られません。

4

1 に答える 1

1

うーん、トリガーのように見えますが、設定したハンドラーを呼び出すだけです (例ではアラートが表示されます)。:hover css スタイルを設定しません。

jQuery domentation は次のように述べています。

trigger() - 指定されたイベント タイプの一致した要素に関連付けられているすべてのハンドラーと動作を実行します。

あなたが何をしようとしているのか正確にはわかりませんが、特定のクラスのリンクを循環させたいだけの場合は、href を取得して、それが指す画像を表示します。次のようなことができます。

コードの jsfiddle を次に示します: http://jsfiddle.net/G6AbM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <style type="text/css">
            body {color: #000; text-align: center}
            .myLink { text-decoration: underline; }
        </style>

        <script type="text/javascript">
            $.onReady = new function() {
                setTimeout(imageChange, 500);
            }

            var nextImage = 0;
            function imageChange() {
                var elements = $('.myLink');
                $('#currentImage').text(elements[nextImage].href);
                if (++nextImage >= elements.length) {
                    nextImage = 0;
                }               
                setTimeout(imageChange, 500);
            }
        </script>
    </head>
    <body>
        <a href="#link1.jpg" class="myLink">Link 1</a>
        <a href="#link2.jpg" class="myLink">Link 2</a>
        <a href="#link3.jpg" class="myLink">Link 3</a>
        <br>
        <span id="currentImage">..</span>
    </body>
</html>
于 2012-11-14T14:37:22.027 に答える