0

我正在为我的客户开发一个 WordPress 网站，而 WordPress 总是需要在这里和那里进行一些小的自定义调整。为了避免依赖插件来解决所有问题，我决定最终给予 JavaScript 应有的关注，并学习如何使用它来进行必要的调整。到目前为止一切顺利！但我认为我在某件事上碰壁了。让我详细说明：

我的页面上有一个按钮，目的是加载比页面已经显示的更多的博客片段。此按钮是一个样式锚标记，没有设置 href 属性，内部有一个 span 标签，表示包含按钮文本的 span。代码如下：

<nav class="vlt-pagination vlt-pagination--load-more">
    <a href="#" class="vlt-btn vlt-btn--primary">
        <i class="icofont icofont-spinner icofont-rotate"></i>
        <span>Load More</span>
        ::after
    </a>
</nav>

我的目标是将目标 URL 更改为实际的博客页面，并仅使用 Javascript 更改按钮文本。

已经完成了一半。我设法使用 setAttribute() 更改了链接。到目前为止就像一个魅力：

var posts_button_container = document.getElementsByClassName("vlt-pagination")[0];
var posts_button = posts_button_container.firstChild;
posts_button.setAttribute("href","http://localhost/coan/blog/");

我撞到的墙是我之后根本无法更改 span 的内容。这是我想出的代码：

var button_text = posts_button.getElementsByTagName("SPAN")[0];
button_text.innerText = "Leia mais";

我使用 .innerHTML 和 .textContent 尝试了此代码的变体，但无济于事。我尝试了 console.log(button_text)，看看这个函数得到了什么样的元素。原来它在控制台上输出一条空白消息。

我是 Javascript 的新手，这意味着我可能会忽略一些非常基本的东西，但目前我无法理解我在这里做错了什么。我很感激你们能给我的关于如何改变这个跨度文本的每一个见解！

提前致谢。

4

1 回答 1

0

您可以通过以下方式实现：

const anchor = document.querySelector('a.vlt-btn');
anchor.href = 'http://localhost/coan/blog/';
anchor.querySelector('span').innerHTML = 'Leia mais';

可以使用 .href 属性读取和设置 href 属性，因此在这种情况下您不需要 setAttribute。

我希望这有帮助

于 2019-08-13T17:20:53.060 回答