这个jquery循环有什么问题？

简要总结一下我想要做的事情：我为用户提供了查看缩略图图库的工具，每个缩略图图像都有相应的下载链接。点击下载链接后，我向用户显示确认div，并假设用户点击“同意”，他们将能够继续下载缩略图的全尺寸版本。这个jquery循环有什么问题？

为此，我使用中继器来生成缩略图。我为'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>

希望你可以从我试图从被点击了下载隐藏的田间小路上面的代码中看到的，然后更新＃文件链接'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>

然而，这一切都不是工作！似乎正在发生的事情是每个下载链接指向相同的路径 - 列表中的最后一个。我无法弄清楚我要去哪里错了。有什么明显的我失踪了吗？

我很感激任何帮助！

感谢

来源

2011-11-17 alimac83

是不是很容易做到：

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

来源

2011-11-17 12:11:40 Niels

你或许应该从事件源（#downloadLinkn）计算的话，从字符串的结尾让ñ。

来源

2011-11-17 12:11:01 harriyott

我建议不要使用所有这些输入字段。它只是创建了一堆不必要的标记。为什么不将#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(); 
});

来源

2011-11-17 12:16:22 maxedison

尝试这样的事情...

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

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

here是工作提琴

来源

2011-11-17 12:20:50 Exception

感谢您的帮助。我会选择你的答案作为答案，但由于我不知道的.next（）函数，Niels'更相关。非常感谢您的输入，但:-) – alimac83

@ alimac83欢迎:-) – Exception

其他人已经提出不同的方式来实现你想要的，但没有人解释为什么当前的代码不起作用。

它目前不起作用的原因是因为范围在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可能会添加块范围变量。但是，它目前不是以跨浏览器的方式实现的。

来源

2011-11-17 12:34:22 Gijs

谢谢Gijs，我很感谢解释。 – alimac83

这个jquery循环有什么问题？

回答

相关问题