這個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循環有什麼問題？

回答

相關問題