Question

我试图操纵按钮的超链接，但与此无关，也不确定我要去哪里。

代码：

<link rel="stylesheet" href="https://cdn.site.td/Calendar.css">
<script type="text/javascript" src="https://cdn.site.td/Calendar.js"></script>
<div id="the-calendar"></div>
<script>
   document.addEventListener("DOMContentLoaded", function() {
   var options = {
   fullNames : false
   };
   var myCalendar = new Calendar(document.getElementById('the-calendar'), options);
   });
</script>

这将生成一个事件日历，该日历将加载到单独的网站上。当将它加载到一个单独的域上时，它完美运行，除了一件事。有一个用于事件的更多信息按钮，当您单击该按钮时，它会尝试转到：

/folder/folder/folder/event-name-1

因此，当然，当我在单独的域上生成它时，它将尝试使用相同的文件夹路径，但当前域除外。因此，由于两个域上的文件夹都不相同，因此无济于事。

我想在按钮上添加onClick事件，以操纵超链接的路径。

按钮为：

<button class="calendar-icon-info-action">More info</button>

请记住，直到上面的初始脚本加载并使用日历的HTML填充页面后，才会生成此按钮。

因此，一旦加载了日历，我就需要为每个事件提供更多信息链接，以操纵每个事件以添加原始域路径。我需要一个变量来存储原始路径，因为它也不会改变。

因此，回顾一下更多的潜在客户生成信息：

/folder/folder/folder/event-name-1

我希望将其存储在变量中，然后将域的另一个var存储在一起，这样它就变成了这样：

var a = "domain.tld";
var b = "/folder/folder/folder/event-name-1";
var c = a + b;

document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(){
document.getElementsByClassName("calendar-icon-info-action")[0].href = var c;
});

Answer 1

href属性仅适用于标记（链接）。由于您拥有<button>，因此您可以做的是拦截并阻止原始事件，然后将页面重定向到所需的URL。

类似这样的东西：

document.getElementsByClassName("calendar-icon-info-action")[0].addEventListener("click", function(event){
    // This will stop the original event:
    event.preventDefault();

    // This will open your desired URL:
    window.location.href = c
});

如果您有多个按钮，并且想要更新所有按钮的事件，则可以循环按钮：

document.querySelectorAll(".calendar-icon-info-action").forEach((elem) => elem.addEventListener("click", function(event){
    event.preventDefault();
    window.location.href = c;
}))

供以后参考，如果您有链接而不是按钮，并且想要更改href属性，则正确的方法是：

document.getElementsByClassName("calendar-icon-info-action")[0].setAttribute('href', 'your-url-here')

在JS中处理Button的链接

1 个答案: