时间戳

首页 > 解决方案 > 如何为同时更改文本的多个元素创建 javascript 显示/隐藏切换？

javascript - 如何为同时更改文本的多个元素创建 javascript 显示/隐藏切换？

问题描述

我正在尝试创建一个每页多次使用的显示/隐藏切换。我相信我正在使用的脚本正在运行，但我希望它还将被点击的链接的文本从“阅读更多”更改为“阅读更少”。

我已经尽力筛选了网站上的几个不同的帖子，但我似乎无法弄清楚不断变化的文本部分。我尝试了不同的代码变体，但它们似乎都没有完成上述两项任务。

function toggleRead(id) {
    var toggle = document.getElementById(id);
    if (toggle.style.display == 'block') {
        toggle.style.display = 'none';
    } else toggle.style.display = 'block';
};
<div style="display: none;" id="post-1">
  <p><strong>Hidden</strong> text inside this div container<p>
</div>

<p><a class="question" onclick="toggleRead('post-1')">Read More</a></p>

<div style="display: none;" id="post-2">
  <p><strong>Hidden</strong> text inside this div container<p>
</div>

<p><a class="question" onclick="toggleRead('post-2')">Read More</a></p>

如果有人能弄清楚如何在保持当前功能的同时将切换链接的文本从“阅读更多”更改为“阅读更少”，反之亦然，我将不胜感激。

标签： javascripthtmlcss

解决方案

您还需要参考切换链接，以更改其文本。我会以不同的方式编写整个内容，但要坚持您的代码，您可以将其更改为还引用“阅读更多”/“阅读更少”链接：

function toggleRead(id, triggeringLink) {
				var toggle = document.getElementById(id);
				if (toggle.style.display == 'block') {
					toggle.style.display = 'none';
                    triggeringLink.innerHTML = 'Read More';
				} else {
                    toggle.style.display = 'block';
                    triggeringLink.innerHTML = 'Read Less';
                }
			}
   <div style="display: none;" id="post-1">
			<p><strong>Hidden</strong> text inside this div container</p>
			<p></p>
		</div>

		<p><a class="question" onclick="toggleRead('post-1', this)">Read More</a></p>

		<div style="display: none;" id="post-2">
			<p><strong>Hidden</strong> text inside this div container</p>
			<p></p>
		</div>

		<p><a class="question" onclick="toggleRead('post-2', this)">Read More</a></p>

希望这可以帮助。

推荐阅读