我想检索链接的HTML属性，并应用于模态按钮

发布于 2025-01-23 23:15:34 字数 874 浏览 1 评论 0原文

我有一个链接列表和一个在单击时弹出的模态。我要实现的只是每当我单击任何链接时，都会检索该链接的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>

原文

I have a list of links and a modal that pops up on click. All i want to achieve is whenever i click on any of the links, retrieve the html attribute of that link and apply to the modal button.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

海之角 2025-01-30 23:15:34

嗨，欢迎@demeyo。

我目前正在手机上，无法测试，但是我将尝试解释您如何简单地实现自己想要的东西。

创建一个反应性数据属性（Fe“ 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指令将链接循环并渲染。

Hi and welcome @demeyo.

I am currently on my phone and can not test it, but I will try to explain how you could simply achieve what you want.

Create a reactive data property (f.e. "activeLink").
Bind that property to your href attribute.
Update that property on click by accessing the target element.

That could look like follows:

<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>

Hint: You could use the x-for directive to loop over your links and render them.

回复收藏 0 原文

~没有更多了~