循环通过JQuery事件侦听器

Question

我试图在循环中放置一堆悬停事件监听器，这样我就不必继续添加它们但它似乎确实有效。有谁知道为什么？

我的文字中有一堆链接，其中包含b_1，b_2，b_3等ID 我将添加将被称为img_1，img_2，img_3等的图像

我想在循环中编写代码，以便它自动添加事件监听器

以下是代码的一部分：

    <span class="uline" id="b_1">oi</span>
<span class="uline" id="b_2">o2</span>

    <div id="data">
    <img class="hidden" id="img_1" src="data/benevolent2.gif" >
    <img class="hidden" id="img_2" src="data/panopticon.jpg" >



</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
console.log($("#data > img").length);
    for (var i = 0; i <= $("#data > img").length; i++) {
        $( "#b_"+i ).hover(function() {

        $( "#img_"+i ).show(); 
        $( "#img_"+i ).css("top",event.pageY-250+"px"); 
        });
        $( "#img_"+i ).click(function() {
        $( "#img_"+i ).hide(); 
        });

    };