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

Question

这里是我的html标记...问题是JavaScript循环无法正常工作...我做了某种错误..我不知道为什么...我想循环$（'＃opt_art'）。 ......和每一个循环，使这样的脚本第一循环$（ '＃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

您不是在调侃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); 

Answer 3

为什么它不为你工作有alreadybeen回答，但是我想提供一个更好的替代你在做什么。

将事件处理程序绑定到多个元素的气味。您正在循环匹配集并为每个元素添加事件处理程序。

相反，您应该将处理程序附加到一个元素并利用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 withopt_，如果这样做，执行事件处理程序上。

欲了解更多信息，你可以阅读完整的文档on()