Не добавляется путь на скачивание через JS

Question

Мне нужно сделать галерею, чтобы при нажатии на кнопку "скачать" (в коде это изображение, код: <i class="fas save-button fa-arrow-down"></i>), файл скачивался.

Есть такой код, который лежит в файле PHP:

<img class="project-imagec_i" src="im/1.jpg">

                        <div class="gallary-opis">
                            <div class="gallary-title">
                            <div class="gallary-title_i">Что-то</div>
                        </div><div class="save_i"><a id="text" class="save_i" href="im/1.jpg" download=""><i class="fas save-button fa-arrow-down"></i></a></div>

Я сделал многомерный массив, который при добавлении туда новых картинок, выводит их в файл PHP:

$(document).ready(function(){
let id_img, title_img, i,
img_glav_page = [

img_1 = [0, 'Хитрая ухмылка - 1', 'im/3.jpg'],
img_2 = [1, 'Хитрая ухмылка - 2', 'im/1.jpg'],
img_3 = [2, 'Хитрая ухмылка - 3', 'im/3.jpg'],
img_4 = [3, 'Хитрая ухмылка - 4', 'im/1.jpg'],
img_5 = [4, 'Хитрая ухмылка - 5', 'im/2.jpg'],

];

for( i = 0; i < img_glav_page.length; i++){
    $('.wrp-1').append('img class="project-imagec_i" src="'+img_glav_page[i][2]+'">

                        <div class="gallary-opis">
                            <div class="gallary-title">
                            <div class="gallary-title_i">'+img_glav_page[i][1]+'</div>
                        </div><div class="save_i"><a id="text" class="save_i" href="**А ТУТ НАЧИНАЮТСЯ ПРОБЛЕМЫ**" download=""><i class="fas save-button fa-arrow-down"></i></a></div>');
}

<a id="text" class="save_i" href="**А ТУТ НАЧИНАЮТСЯ ПРОБЛЕМЫ**" download=""> - проблема заключается в том, что при добавлении пути на скачивание ('+img_glav_page[i][2]+'), ссылка не меняется. Остальные значения спокойно меняются при добавлении их в массив, а тут нет.

Итог: при добавлении новых картинок картинок в JS, они добавляются. Но не изменяется путь на скачивание( т.е. если был указан src="im/1.jpg" в файле PHP, то у всех остальных картинок будет такой путь).

Как мне сделать, чтобы и там менялся путь?

Answer 1

Раз

$(document).ready(function() {
    let id_img, title_img, i,
        img_glav_page = [
            ['Хитрая ухмылка - 1', 'im/1.jpg'],
            ['Хитрая ухмылка - 2', 'im/2.jpg'],
            ['Хитрая ухмылка - 3', 'im/3.jpg'],
            ['Хитрая ухмылка - 4', 'im/4.jpg'],
            ['Хитрая ухмылка - 5', 'im/5.jpg'],
        ];

    for (i = 0; i < img_glav_page.length; i++) {
        let template = `
                <img class="project-imagec_i" src="${img_glav_page[i][1]}">
                <div class="gallary-opis">
                    <div class="gallary-title">
                    <div class="gallary-title_i">${img_glav_page[i][0]}</div>
                </div>

                <div class="save_i">
                    <a id="text" class="save_i" href="${img_glav_page[i][1]}" download="">
                        <i class="fas save-button fa-arrow-down"></i>
                    </a>
                </div>
                `;
        $('.wrp-1').append(template);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="wrp-1"></div>

И два

$(document).ready(function() {
    let id_img, title_img, i,
        img_glav_page = [
            {name: 'Хитрая ухмылка - 1', href: 'im/1.jpg'},
            {name: 'Хитрая ухмылка - 2', href: 'im/2.jpg'},
            {name: 'Хитрая ухмылка - 3', href: 'im/3.jpg'},
            {name: 'Хитрая ухмылка - 4', href: 'im/4.jpg'},
            {name: 'Хитрая ухмылка - 5', href: 'im/5.jpg'},            
        ];

    img_glav_page.forEach(item => {
        let template = `
                <img class="project-imagec_i" src="${item.href}">
                <div class="gallary-opis">
                    <div class="gallary-title">
                    <div class="gallary-title_i">${item.name}</div>
                </div>

                <div class="save_i">
                    <a id="text" class="save_i" href="${item.href}" download="">
                        <i class="fas save-button fa-arrow-down"></i>
                    </a>
                </div>
                `;
        $('.wrp-1').append(template);
    
    });    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="wrp-1"></div>

Обращаю внимание, что есть незакрытые теги div ибо я не знаю где они у вас должны закрываться

БЛОГ НА HUSL

Не добавляется путь на скачивание через JS

Ответы (1 шт):