Question

这是我的HTML标记...问题是javascript循环不起作用...我做了某种错误..我不知道为什么...我想循环$（'＃opt_art'）。mouseover等...每个循环使得脚本像第一个循环$（'＃opt_art1）.mouseover，第二个循环$（'＃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'); ?>

Answer 1

您忘了增加i变量：

   ...
   });
   i++;
}
while(i<=5);

Answer 2

为什么它没有为你工作already been已经回答，但是我想提供一个更好的替代你正在做的事情。

将事件处理程序绑定到多个元素 smells 。您循环遍历匹配的集合并为每个元素添加事件处理程序。

相反，您应该将处理程序附加到一个元素并利用event bubbling。这可以使用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为begins with opt_的元素上，如果它执行了事件处理程序。

有关详细信息，请阅读on()

的完整文档

Answer 3

您没有发现i您也可以使用i变量而不是第二个变量num。试试这个。

var i = 1;
do{
   $('#opt_art'+i).mouseover(function(){
    $('.opsi'+i).show();
   });  
   $('#opt_art'+i).mouseout(function(){
        $('.opsi'+i).fadeOut(2000);
   });
}
while(i++<=5);

如何制作一个独特的div id？

3 个答案: