javascript - 这个 jquery 循环有什么问题？

Question

简单总结一下我正在尝试做的事情:我为用户提供了查看缩略图库的工具，每个缩略图都有一个相应的下载链接。单击下载链接时，我会向用户显示一个确认 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>

但是，这一切都不起作用!似乎正在发生的事情是每个下载链接都指向相同的路径 - 列表中的最后一个。我不知道我哪里错了。我是否遗漏了一些明显的东西？

感谢您提供的任何帮助!

谢谢

Answer 1

这样做不是更容易吗:

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