这个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();
    });
});

Answer 2

试试这样的..。

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

单击任何下载链接后，此代码将将关联的图像href路径传递给文件链接元素。

这里是工作的小提琴

Answer 3

我建议不要使用所有这些输入字段。它只是创建了一堆不必要的标记。为什么不将#count值简单地存储在JavaScript变量中呢？还可以删除包含图像路径的输入。您可以将该信息存储在每个下载链接的属性中，命名为“数据路径”。例如：

<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();
});