将 HTML 元素属性传递给另一个元素属性

Question

我正在使用 Elementor Pro 进行网站开发。我创建了一个标准弹出窗口，如果用户点击页面上的 link，就会触发该弹出窗口

<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink1.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink2.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink3.com”>test link</a>
<a href="#elementor-action-foo” data-extlinkurl="https://www.mylink4.com”>test link</a>

弹出窗口（在同一页面上）有一个按钮，可以将用户转到外部 link 之前单击的内容：

<a href="https://www.test.com" class="elementor-button-link elementor-button" id="extlinkurl" role="button">Take me to the link</a>

Elementor 没有提供根据自定义属性（在本例中为“ext-link”）动态设置按钮的 href 值的选项，但我没有找到其他选项来动态设置 href 属性这个按钮。这里是否有一个简单的 JavaScript /jQuery 转义（无插件！）可用于将自定义属性值传递给按钮 link 属性？

编辑 -

我做了一些尝试来资助这个问题的解决方案，我想出了以下几点：

<script>
    // Append an onclick event to each link
    let extLinkItems = document.querySelectorAll('[data-extlinkurl]');
    extLinkItems.forEach((extLinkItem) => {
        extLinkItem.setAttribute("onclick", "getUrl()");
    });

onclick 事件已正确添加到每个 link 此处。

因为函数setLink（见下文）不起作用，我在这里添加了一些检查：

console.log("Button count=" + document.querySelectorAll('#extlinkbtn').length); // Button count=1
console.log("Button href=" +  document.getElementById("extlinkbtn").href); // Button href=http://www.test.com/
console.log("Button href=" +  document.getElementById("extlinkbtn").getAttribute("href")); // Button href=http://www.test.com

这些提供了预期的结果。找到按钮并且 href 属性可用。

function getUrl() { 
    var newUrl = event.currentTarget.getAttribute('data-extlinkurl');
    console.log("newUrl=" + newUrl); // newUrl=https://www.mylink1.com
    setUrl(newUrl);
}

也能正常工作。单击link时，link的数据属性可用。

    function setUrl(newLink) {
        let linkButtons = document.querySelectorAll('#extlinkbtn');
        console.log("count=" + linkButtons.length) // count=0
        linkButtons.forEach((linkButton) => {
            linkButton.setAttribute("href", "'" + newLinkUrl + "'");
        });
    }   
</script>

这里就出现问题了。一旦点击link，按钮就找不到了。按钮在那里，因为带有按钮的弹出窗口显示在屏幕上并且元素可见。我现在正在测试几天，但我尝试过的任何一种解决方案都不起作用。为什么在全局范围内搜索可以找到按钮元素，但单击 link 后按钮在函数范围内不可用？

Answer 1

最终，并没有感谢 Elementor 二线支持，我找到了解决方案。似乎弹出窗口的内容最初是加载的，但在加载 DOM 后被函数删除。解决方案在这里：https://developers.elementor.com/elementor-pro-2-7-popup-events/

我所做的是将自定义数据属性添加到 link 按钮，该按钮在加载后在弹出屏幕中单击，其中包含目标 URL。在此之后，我在弹出模板中添加了一些JS/jQuery：

<script>
let newLinkUrl = "";
let extLinkItems = document.querySelectorAll('[data-extlinkurl]');
extLinkItems.forEach((extLinkItem) => {
  extLinkItem.setAttribute("onclick", "getUrl()");
});

function getUrl() { 
    newLinkUrl = event.currentTarget.getAttribute('data-extlinkurl');
    jQuery( document ).on( 'elementor/popup/show', () => {
        document.getElementById('extlinkbtn').href=newLinkUrl;
    });
}
</script>

这非常有效

将 HTML 元素属性传递给另一个元素属性

Pass on HTML element attribute to another element attribute

html

javascript

wordpress

jquery

elementor