Javascript 多个隐藏/显示文本

您好，我想询问如何为我的WordPress站点创建多个隐藏/显示更多编码。我对下面的代码有问题，源代码混淆了。我如何区分这两者？请帮忙，谢谢

--Script1--
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click here for complete details.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide details.";
}
} 
</script><a id="displayText" href="javascript:toggle();">Click here for complete details.</a>
<div id="toggleText" style="display: none">Details</div>
</span>

--Script2--
<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Click here for more information.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Disclaimer.";
}
} 
</script><a id="displayText" href="javascript:toggle();">Click here for more information.</a>
<div id="toggleText" style="display: none">Information</div>
</span>

——脚本1--
函数切换（）{
var ele=document.getElementById（“toggleText”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“单击此处查看完整的详细信息。”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏详细信息。”；
}
} 
细节
--脚本2--
函数切换（）{
var ele=document.getElementById（“toggleText”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“单击此处了解更多信息。”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏免责声明。”；
}
} 
问询处

更改

函数的名称和
id
。
我希望这个答案会有所帮助



函数切换（）{
var ele=document.getElementById（“toggleText”）；
var text=document.getElementById（“displayText”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“单击此处查看完整的详细信息。”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏详细信息。”；
}
} 
细节
--脚本2--
函数切换1（）{
var ele=document.getElementById（“toggleText1”）；
var text=document.getElementById（“displayText1”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“单击此处了解更多信息。”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏免责声明。”；
}
} 
问询处
在JavaScript中，添加具有相同名称的第二个方法以替换前一个方法

因此，您应该向函数中添加参数，并在调用时传递它们


功能切换（ele）{
var text=ele.nextElementSibling；
如果（text.style.display==“块”）{
text.style.display=“无”；
ele.innerHTML=ele.getAttribute（'data-initial-text'）；
}否则{
text.style.display=“块”；
ele.innerHTML=ele.getAttribute（'data-hide-text'）；
}
}

细节
信息
您必须为元素指定不同的id，因为id应该是唯一的。并定义不同的函数名。您正在使用相同的函数名：

请尝试以下代码：

function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Click here for complete details.";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide details.";
    }
} 
</script>
<a id="displayText1" href="javascript:toggle1();">Click here for complete details.</a>
<div id="toggleText1" style="display: none">Details</div>


<script language="javascript"> 
function toggle2() {
    var ele = document.getElementById("toggleText2");
    var text = document.getElementById("displayText2");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Click here for more information.111";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide Disclaimer.111";
    }
} 
</script>
<a id="displayText2" href="javascript:toggle2();">Click here for more information.</a>
<div id="toggleText2" style="display: none">Information</div>

函数切换1（）{
var ele=document.getElementById（“toggleText1”）；
var text=document.getElementById（“displayText1”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“单击此处查看完整的详细信息。”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏详细信息。”；
}
} 
细节
函数切换2（）{
var ele=document.getElementById（“toggleText2”）；
var text=document.getElementById（“displayText2”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
text.innerHTML=“单击此处了解更多信息。111”；
}
否则{
ele.style.display=“块”；
text.innerHTML=“隐藏免责声明.111”；
}
} 
问询处
尝试使用
class
而不是
id
，并且
此
属性肯定会帮助您使用相同的
id
脚本和html，现在您可以使用不同的
id