Что не так с этим циклом jquery?

Question

Чтобы кратко изложить, что я пытаюсь сделать: я предоставляю пользователю возможность просматривать галерею миниатюрных изображений, каждое из которых имеет соответствующую ссылку для скачивания.Когда нажата ссылка для скачивания, я предоставляю пользователю div подтверждения и, если пользователь нажимает «согласиться», он сможет приступить к загрузке полноразмерной версии эскиза.

Для этого я использую повторитель для создания миниатюр.Я создаю уникальный идентификатор для каждой ссылки в событии ItemCreated вместе с уникальным скрытым полем, в котором хранится относительный путь к файлу назначения для этого эскиза.

Когда пользователь нажимает кнопку «Загрузить»'ссылка на соответствующую миниатюру, мой код должен выбрать ссылку "согласиться" и обновить целевой путь, указав значение скрытого поля для элемента, по которому был выполнен щелчок (надеюсь, это имело смысл?).По сути, это означает, что всякий раз, когда нажимается кнопка «Загрузить», обновляется ссылка «согласиться», чтобы направить вас к нужному файлу.

Однако проблема, с которой я сталкиваюсь, заключается в том, что моя ссылка «согласиться» никогда не получаетобновлено - похоже, он указывает на один и тот же файл для каждой миниатюры.

Вот фрагмент списка отрисованных миниатюр:

<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

Попробуйте что-то вроде этого ...

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

После нажатия на любую ссылку для скачивания, этот код передаст путь href связанного изображения в элемент file-link.

здесь это рабочая скрипка

Answer 2

Не проще ли это сделать:

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

Answer 3

Другие люди уже предлагали разные способы достижения того, чего вы хотите, но никто не объяснил, почему ваш текущий код не работает.

Причина, по которой он в настоящее время не работает, заключается в том, как работает контекст в 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, которая затем передается как обработчик щелчка.

Если это выглядит действительно сложно, вот более детальный взгляд на функции и область видимости в Javascript .

* Обратите внимание, что предлагаемые новые версии Javascript / Ecmascript могут добавлять блочные переменные. Однако в настоящее время он не реализован кросс-браузерным способом.

Answer 4

Я бы рекомендовал не использовать все эти поля ввода. Это просто создает кучу ненужной разметки. Почему бы не сохранить значение #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 5

Вы, вероятно, должны рассчитать его из источника события (#downloadLinkn), получив n от конца строки.