这个jquery循环有什么问题?

简要地总结一下我要做的事情:我为用户提供了查看缩略图图库的功能，每个图库都有相应的下载链接。当下载链接被点击时，我向用户展示一个确认div，假设用户点击了"同意"，他们就可以继续下载完整尺寸的缩略图了。

为了做到这一点，我使用了一个重复器来生成缩略图。我正在为'ItemCreated'事件中的每个链接创建一个唯一的id，以及一个唯一的隐藏字段，该字段存储该缩略图的目标文件的相对路径。

当用户点击相应缩略图的"下载"链接时，我的代码应该选择"同意"链接，并使用被点击项目的隐藏字段值更新它的目标路径(我希望这有意义?)。这基本上意味着只要点击"下载"按钮，"同意"链接就会更新，引导你到正确的文件。

我遇到的问题是，我的"同意"链接从来没有得到更新-它似乎指向相同的文件为每个缩略图。

下面是渲染的缩略图列表的一个片段:

<div class="download-listing">
    <div class="download">
        <img src="/img/thumb0.jpg" alt="" />
        <div id="downloadLink0" class="dl">Download</div>
        <input type="hidden" id="hf0" value="/GetImage.ashx?path=/img/0.jpg" class="hf" />                    
    </div>
    <div class="download">
        <img src="/img/thumb1.jpg" alt="" />
        <div id="downloadLink1" class="dl">Download</div>
        <input type="hidden" id="hf1" value="/GetImage.ashx?path=/img/1.jpg" class="hf" />              
    </div>
    <div class="download">
        <img src="/img/thumb2.jpg" alt="" />
        <div id="downloadLink2" class="dl">Download</div>
        <input type="hidden" id="hf2" value="/GetImage.ashx?path=/img/2.jpg" class="hf" />                    
    </div>
</div>
<input id="count" type="hidden" value="3" />
<!-- Hidden popup -->
<div id="popup">
<p><a id="close" class="bClose action">I disagree</a><a id="file-link" class="action" href="#">I agree</a></p>
</div>

希望你能从上面的代码中看到，我试图从点击的下载中提取隐藏字段路径，然后用这个值更新#file-link 'href'。

我正在使用的Javascript/Jquery(这就是问题所在)如下:

<script type="text/javascript">
$(document).ready(function () {
  for (var i = 0; i < $("#count").val(); i++) { 
    var index = i;
    $("#downloadLink" + index).click(function () {
      $('#file-link').attr('href', $('#hf' + index).val());
      $('#popup').bPopup();
    });          
  }      
});
</script>

然而，这些都不起作用!似乎每个下载链接都指向同一个路径——列表中的最后一个。我不知道我哪里做错了。有什么明显的东西我没注意到吗?

感谢给予的任何帮助!

谢谢

$(function(){
    $(".download .dl").click(function(){
        $('#file-link').attr('href', $(this).next("input").val());
        $('#popup').bPopup();
    });
});

 $("div[id*='downloadLink']").click(function () {
          $('#file-link').attr('href',$(this).siblings('img').attr('src'));
          $('#popup').bPopup();
});         

<div id="downloadLink0" class="dl" data-path="/GetImage.ashx?path=/img/0.jpg">Download</div>

$('.dl').click(function(){
    $('#file-link').attr('href', $(this).attr('data-path')); //could also do $(this).data('path') if using jQuery 1.6 or later
    $('#popup').bPopup();
});

$(document).ready(function () {
  for (var i = 0; i < $("#count").val(); i++) {
    var fn = (function(index) {
      return function () {
          $('#file-link').attr('href', $('#hf' + index).val());
          $('#popup').bPopup();
      };
    })(i);
    $("#downloadLink" + i).click(fn);
  }     
});