0

これが私のhtmlマークアップです...問題はjavascriptループが機能しないことです...私はある種の間違いをしました..理由がわかりません...$（'＃opt_art'）。mouseoverなどをループしたいです。 。そしてすべてのループは、この最初のループ$（'＃opt_art1）.mouseover、2番目のループ$（'＃opt_art2）.mouseoverなどのようなスクリプトを作成します

<?php include('header.php'); ?>
    <script type="text/javascript">
        $(document).ready(function(){
            var i = 0;
            do{
                var num = i;
                $('#opt_art'+num).mouseover(function(){
                    $('.opsi'+num).show();
                });
                $('#opt_art'+num).mouseout(function(){
                    $('.opsi'+num).fadeOut(2000);
                });
                i++;    
            }
            while(i<=2);
        });
    </script>
    <?php
        for($i=1;$i<=2;$i++){
    ?>
        <div id="art_category"><p>News</p></div><!-- end of category -->
        <div id="art_title"><p>Sherlock Holmes 2</p></div><!-- end of art_title -->
        <div id="rounded_artikel">
            <li><img src="images/42897.jpg" width="110" height="110" class="art_image"/></li>
            <ul><li><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum bibendum magna at egestas. Sed commodo gravida arcu id accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque vulputate, velit vitae pellentesque condimentum, lectus mi tempor nisl, sed sagittis est massa eu justo. Cras sed quam sed mauris elementum consectetur. Nunc vitae tortor diam, in hendrerit risus. Nulla et diam non libero vehicula blandit. Etiam facilisis, risus mattis venenatis iaculis, risus dolor lobortis sapien, a malesuada magna nibh nec tellus. Integer viverra, sapien quis pellentesque lobortis, tellus erat mattis nulla, vitae laoreet erat dolor sed ante.</p></ul></li>
        </div><!-- end of rounded_artikel -->
        <div id="art_info">
            <img src="images/communication-icon.png" width="23" height="23" class="comment"/><li class="total_komentar"><a href="#">123</a> Komentar</li>
            <img src="images/40395696544694793.png" width="23" height="21" class="art_date_icon"/><li class="art_date">19-06-2012</li>
            <img src="images/1903484911.png" width="23" height="21" class="author_icon"/><li class="author">straw_hat</li>
            <div id="opt_art<?=$i;?>">Option<?php echo $i; ?></div>
            <div class="opsi<?=$i;?>"><center><a href="#">Readmore</a> | <a href="#">Comment</a></center></div>
        </div><!-- end of art_info -->
    <?php } ?>
<?php include('footer.php'); ?>
4

3 に答える 3

3

i変数をインクリメントするのを忘れています：

   ...
   });
   i++;
}
while(i<=5);
于 2012-05-10T14:44:09.963 に答える
2

うまくいかない理由はすでに回答 されていますが、あなたがしていることのより良い代替手段を提供したいと思います.

イベント ハンドラーを複数の要素にバインドすると、においがします。一致したセットをループして、各要素のイベント ハンドラーを追加しています。

代わりに、ハンドラーを1 つの要素にアタッチして、イベント バブリングを利用する必要があります。これは、on()メソッドとオプションのセレクターを使用して行うことができます。

$(document).on('mouseover  mouseout', '[id^="opt_"]', function (e) {
    var el = $('.opsi'  + this.id.slice('opt_'.length));

    if (e.type === "mouseover") {
        el.show();
    } else {
        el.fadeOut(2000);
    }
});

上記のコードは、mouseoverまたはmouseoutイベントの発生をリッスンし、IDが で始まる opt_要素で発生したかどうかを確認し、発生した場合はイベント ハンドラを実行します。

詳細については、完全なドキュメントを参照してください。on()

于 2012-05-10T14:49:03.580 に答える
0

また、2番目の var の代わりに variable を使用することiもできます。これを試して。inum

var i = 1;
do{
   $('#opt_art'+i).mouseover(function(){
    $('.opsi'+i).show();
   });  
   $('#opt_art'+i).mouseout(function(){
        $('.opsi'+i).fadeOut(2000);
   });
}
while(i++<=5);
于 2012-05-10T14:44:21.413 に答える