如何將錨標記中的值傳遞給 javascript 變量內的 html 代碼

Question

我有一個打開彈出框的錨標記，彈出框本身有一個錨標記，后者使用 javascript 生成。我需要將第一個錨標記的值傳遞給第二個錨標記。

彈出代碼：

<a class="btn-opt btn-sm image-options" data-bs-container="body"
    data-bs-toggle="popover" data-bs-placement="left"
    data-bs-html="true"><i class="fa-solid fa-ellipsis"></i></a>

Javascript：

var popString2 = "";
popString2 = popString2 + "<a href='#' class='options' id ='saveImage'>Save image<span class='icon-pop'><i class='fa-regular fa-floppy-disk'></i></span></a>";

  $(".image-options").attr('data-bs-content', popString2);

我將popString2分配給所有帶有 class image-options的錨標記的data-bs-content屬性，因為我有幾個。 javascript 中的“保存圖像”鏈接將觸發圖像下載。

當彈出窗口被點擊時，我需要它將圖像 URL 作為href值傳遞給 popString1 變量中的錨標記。

我正在用 Flask 加載圖像。我還可以為每個圖像加載一個id屬性值，然后將該值以某種方式添加到彈出代碼中，這樣我就可以將它傳遞給 javascript。但我真的不知道是否最后一部分是可能的。

此屏幕截圖可能有助於理解我需要實現的目標。

Answer 1

好的，我有一個想法，但我不知道 javascript/jquery 所以我確定我的代碼是錯誤的，主要是因為它不工作。

這個想法是將動態生成的id屬性分配給 img 和 popover 錨標記。 錨標簽的id屬性是數據庫中的圖像 id，我用 Flask 加載它，這樣它是唯一的。 img標簽 id 屬性與錨標簽相同，但在末尾添加“img”。 前任。 <a id="1"></a> / <img id="1img"> 。 然后使用onclick事件從錨標記調用 javascript function。

我對 javascript/jquery function 的嘗試是這樣的：

    $(document).ready(function(){

        $('.image-options').click(function() {
           var icon_id = $(this).attr('id');
           icon_id = "#" + icon_id
           img_id = icon_id + "img";
           the_url = $(img_id).attr('src');

           var popString2 = "";
           popString2 = popString2 + "<a href='" + the_url + "' class='options'>Save image <span class='icon-pop'><i class='fa-regular fa-floppy-disk'></i></span></a>";
           $(icon_id).attr('data-bs-content', popString2);

           var popString1 = "";
           popString1 = popString1 + "<a href='" + the_url + "' class='options' id ='addCollection'>Add to collection <span class='icon-pop'><i class='fa-solid fa-plus'></i></span></a>";
           $(icon_id).attr('data-bs-original-title', popString1);
        });
     });

HTML 代碼：

<img class="card-img-top card-img-bottom thumb" data-bs-toggle="modal"
data-bs-target="#myModal" src="{{ url_for('static',filename=image[1]) }}" id="{{ image[0] ~ 'img' }}">

<a class="btn-opt btn-sm image-options" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true" id="{{ image[0] }}" onclick="url_getter()"><i class="fa-solid fa-ellipsis"></i></a>

這行得通嗎？ 如果是這樣，我的代碼有什么問題？

更新：

所以我盡可能地糾正了我的 JQuery 並且它幾乎可以工作。 屬性已成功分配給 popover 錨標記，但是當我單擊它時，“添加到集合”鏈接有效，但“保存圖像”鏈接無效。 當我檢查元素時， href值從它的錨點消失了。