这个JavaScript能在一个WordPress页面中处理多个显示/隐藏吗

Can this JavaScript handle more than one show/hide in a WordPress Page?

本文关键字：处理 显示 隐藏 WordPress JavaScript 一个 这个      更新时间：2023-09-26

还有其他问题，答案很好（例如出现storeitem），但不幸的是，我还不够熟悉，除了调整我们的代码之外，我还没有做更多的事情。我在其他论坛上问过，但没有成功。

我们有一个WordPress（托管）网站和一个页面（而不是帖子），需要四个纯文本段落，它们只是在"更多…"上显示/隐藏一些额外的纯文本点击

页面上有四段纯文本测试，每段后面都跟着"更多…"-没有什么比这更美妙的了。没有面板、边框、图形元素等。

其想法是，用户可以扩展其中一段、部分或全部内容。

如果我们用以下JavaScript:启动页面（在WP编辑器中），我们的代码对一个实例（一个"More…"）来说效果很好

<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
// ]]></script>

然后包装要显示的内容：

<div id="toggleText" style="display: none;">to-be-revealed content</div>

然后点击：

<a id="displayText" href="javascript:toggle();">More...</a>

这非常有效。即将公布的内容会迅速出现，下面是它下面的内容。

但是，到目前为止，在一个页面中就多个实例采纳我们的建议是行不通的。

建议是重复JavaScript，并在每次重复中为toggleText和displayText使用不同的ID。

但这样做，页面中JavaScript的最后一个副本总是触发的，在最后（第四）段中显示要显示的内容，以"更多…"为准单击。（我想我明白为什么了——这是"最新的"切换功能，所以它是适用的。）

到目前为止，这是我们在多个实例中所拥有的（建议我们的人并不是关于…）——它只是JS的四个副本，带有toggleText和displayText编号：

<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText1"); var text =      document.getElementById("displayText1"); if(ele.style.display == "block") { ele.style.display =    "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText2"); var text =  document.getElementById("displayText2"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText3"); var text =  document.getElementById("displayText3"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>
<script type="text/javascript" language="javascript">// <![CDATA[
function toggle() { var ele = document.getElementById("toggleText4"); var text = document.getElementById("displayText4"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "More ..."; } else { ele.style.display = "block"; text.innerHTML = "... less"; } }
// ]]></script>

然后包裹和点击也分别为每个实例编号，例如：

<a id="displayText1" href="javascript:toggle();"><span style="color: #339966;">Show more ...</span></a>
<div id="toggleText1" style="display: none;">
Content
</div>

问：这种使用JavaScript的方式可以用于多个实例吗？如果是，请出示！

看起来切换函数本身需要某种ID才能将其绑定到一个（"编号"）实例。我可以看到其他一些答案是如何指向相关解决方案的，但不幸的是，我还不知道足够的信息来正确理解它们（接触jQuery对我来说是第一次，我希望周一能做到这一点）。

谢谢，C

我认为没有必要创建多个做相同事情的函数。通常，您应该在函数调用中传递参数。例如

<a id="displayText1" href="javascript:toggle(1);">...</a>
<a id="displayText2" href="javascript:toggle(2);">...</a>
<a id="displayText3" href="javascript:toggle(3);">...</a>
<a id="displayText4" href="javascript:toggle(4);">...</a>

以及在javascript中：

function toggle(num) {
    var ele = document.getElementById("toggleText" + num);
    var text = document.getElementById("displayText" + num);
    ....
}

工作起来很有魅力。希望这能有所帮助。

您可以尝试

<a id="displayText" href="javascript:toggle(this);">More...</a>

则在切换功能中

function toggle(element) {
    // element here is the link you clicked try to find the hidden text relative to this link. using Dom navigation
}
相关文章：