javascript - 单击链接时更改文本

Question

所以我正在使用 bootstrap 开发一个折叠的 div 容器。在我尝试添加修改之前它工作得很好。

我添加了一个显示“查看更多”的文本链接，以便我的用户知道还有更多文本可供阅读。不管怎样，我已经编写了一个 jquery 代码来将文本“查看更多”更改为“关闭”只要 DIV 容器折叠或显示。

我的目标:

当用户决定折叠 div 容器时，我希望它将“查看更多”文本更改为“关闭”

这是我的问题:

我的 JQUERY 代码仅将文本“查看更多”修改为“关闭”，仅适用于第一个文本链接。即使我点击了后续的文本链接也不会被修改。

此外，页面中有五个“查看更多”文本链接具有相同的类名(不确定此信息是否相关，但我想值得一提......)

无论如何，您可以在我下面提供的引用文献中看到有什么问题( gif 和 codepen )

这是一个 GIF 供您引用。 imgur.com/V8Q4RSj

这是我的完整代码: https://codepen.io/bendaggers/pen/dyoqqVE

这是我的 JQUERY 代码:

$("#yt").click(function(){

  $('#closeopen').text($('#closeopen').text() == 'View More' ? 'Close' : 'View More');

});

我将不胜感激任何可以帮助我的人。

Answer 1

使用CSS伪元素::before

.collapse:not(.show) + .closeopen::before {
  content: 'View More';
}
.collapse.show + .closeopen::before {
  content: 'Close';
}

工作演示

https://codepen.io/aswinkumar863/pen/gOpddZw