使用 jQuery 将超链接添加到 WordPress 手风琴标题答案

【问题标题】：Add hyperlink to WordPress Accordion Title Using jQuery使用 jQuery 将超链接添加到 WordPress 手风琴标题
【发布时间】：2021-12-16 11:58:18
【问题描述】：

我在https://therussellcons.wpengine.com/services/ 正在构建的页面上有一个手风琴，我正在尝试向“培训培训师”标题添加一个超链接，但似乎无法弄清楚。标题有一个空的href，因为它用于触发手风琴的打开，但我需要这个特殊的手风琴链接到外部 url。我尝试了很多不同的方法，但以下是我最后尝试的方法，但没有成功。

jQuery(document).ready(function(){
    jQuery("#elementor-tab-title-1832").click(function(){
            $("a.elementor-accordion-title").attr("href", "https://www.test.com");
    });
});

【问题讨论】：

想想你在这里做什么。在 click 事件中，您正在更新 href 属性。那么，这将需要 第二次 单击才能充当链接。您需要在点击之前添加 href 属性，例如在页面加载时。
现在，如果您希望第一次点击只是重定向页面，请参阅stackoverflow.com/questions/503093/…
根本不改变href，为什么不直接在点击链接时重定向访问者呢？ window.location.href = "https://www.test.com";
@isherwood 我点击了另一个 SO 线程的链接，并能够添加带有jQuery("#elementor-tab-title-1832 a").prop('href', 'http://stackoverflow.com') 的链接，但现在有另一个问题。在手风琴动作后面无法访问该链接。你能帮忙解决这个问题，还是我应该提出一个新问题？谢谢。
嗯，您还没有真正达到网站标准（请参阅How to Ask），我目前看不到您的网站，因为它已被阻止。也许如果你在你的问题中放更多的东西。

标签： jquery wordpress

【解决方案1】：

如果选项卡标题的数量很多且不同，请使用 redirectUrl 之类的变量。
然后通过js处理链接上的点击事件：

var redirectUrl = "#";
jQuery(document).ready(function(){
    jQuery("#elementor-tab-title-1832").click(function(e){
          redirectUrl = "http://test.com";
    });
    //Others tab-title-xxxx click events
    //...
    //...

    jQuery("a.elementor-accordion-title").click(function(e){
          e.preventDefault();
          window.location.href = redirectUrl;
    });
});

【讨论】：

【解决方案2】：

您可以将onclick 属性放在您的 a 标签中，如下所示：

<a href="" onclick="window.open('http://test.com', '_blank')">...</a>

【讨论】：

这不是将 JavaScript 放在 HTML 元素上的最佳实践，而且这个解决方案可能已经在 SO 上被提及了 800 次。最好坚持问题中实际提出的问题。

【解决方案3】：

您必须使用此代码单击两次才能使其工作。有没有其他方法可以做到这一点？

var redirectUrl = "#";
jQuery(document).ready(function(){
    jQuery("#elementor-tab-title-1832").click(function(e){
          redirectUrl = "http://test.com";
    });
    //Others tab-title-xxxx click events
    //...
    //...

    jQuery("a.elementor-accordion-title").click(function(e){
          e.preventDefault();
          window.location.href = redirectUrl;
    });
});

【讨论】：