我想检索 link 的 html 属性并应用于模式按钮

Question

我有一个 link 的列表和一个点击弹出的模式。我想要实现的是每当我单击任何 link 时，检索该 link 的 html 属性并应用于模态按钮。

<body x-data="{ extModal : false }">
    <ul>
        <li><a @click="extModal = !extModal" href="http://examplelink-1.com"></a></li>
        <li><a @click="extModal = !extModal" href="http://examplelink-2.com"></a></li>
        <li><a @click="extModal = !extModal" href="http://examplelink-3.com"></a></li>
    </ul>
    <div x-show="extModal">
        <h2>External Link Alert</h2>
        <p>Are you sure you want to leave this site?</p>
        <button @click="extModal = false">No</button>
        <!-- Dynamic link update -->
        <a href="" @click="extModal = false" target="_blank">Yes</a>
    </div>
</body>

Answer 1

您好，欢迎@demeyo。

我目前正在 phone 中，无法对其进行测试，但我会尝试向您解释如何简单地实现您想要的。

创建反应数据属性 (f.e."activeLink")。
将属性绑定到您的 href 属性。
通过访问目标元素在单击时更新属性。

可能如下所示：

<body x-data="{ extModal : false, activeLink: '' }">
    <ul>
        <li><a @click="extModal = !extModal; activeLink = $event.target.getAttribute('href')" href="http://examplelink-1.com"></a></li>
        <li><a @click="extModal = !extModal; activeLink = $event.target.getAttribute('href')" href="http://examplelink-2.com"></a></li>
        <li><a @click="extModal = !extModal; activeLink = $event.target.getAttribute('href')" href="http://examplelink-3.com"></a></li>
    </ul>
    <div x-show="extModal">
        <h2>External Link Alert</h2>
        <p>Are you sure you want to leave this site?</p>
        <button @click="extModal = false">No</button>
        <!-- Dynamic link update -->
        <a :href="activeLink" @click="extModal = false" target="_blank">Yes</a>
    </div>
</body>

提示：您可以使用 x-for 指令循环访问您的链接并呈现它们。

我想检索 link 的 html 属性并应用于模式按钮

I want to retrieve the html attribute of a link and apply to a modal button

hyperlink

attributes

modal-dialog

alpinejs