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路径传递给file-link元素。

here是工作小提琴

Answer 3

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

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

Answer 4

其他人已经提出了不同的方法来实现您的目标，但是没有人解释为什么您当前的代码不起作用。

它当前不起作用的原因是因为Javascript中的作用域如何工作。没有块范围*，因此您的index变量定义一次，并在每次循环运行时更新，直到最后它具有最大（最后）值。然后，无论何时运行事件处理程序，index仍然具有此值，并且将使用最后一项。

因此，在JS中，获取新范围的最简单方法是使用闭包。以下是根据您的代码改编的示例：

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

这不像其他一些答案那样解决你的实际问题。但是，它演示了创建范围的概念：您正在调用一个函数，该函数接受一个参数index，您可以为其传递循环迭代器变量i。这意味着它内部的函数（它返回）现在可以始终访问此参数的值。内部函数存储在fn中，然后作为单击处理程序传递。

如果这看起来很棘手，那就是a more in-depth look at function and scope in Javascript。

*请注意，建议的新版Javascript / Ecmascript可能会添加块范围变量。但是，它目前尚未以跨浏览器方式实现。

Answer 5

你应该从事件源（#downloadLinkn）计算它，从字符串的末尾获取 n 。

这个jquery循环有什么问题？

5 个答案: