Question

您好，我想询问如何为我的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>

Answer 1

更改function和id的名称。我希望这个答案会有所帮助。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 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 more information.";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide Disclaimer.";
}
} 
</script><a id="displayText1" href="javascript:toggle1();">Click here for more information.</a>
<div id="toggleText1" style="display: none">Information</div>
</span>

＆＃13;

Answer 2

在JavaScript中，添加具有相同名称的第二个方法会替换前一个方法。

所以你应该在函数中添加参数并在调用它时传递它们。

function toggle(ele) {
	var text = ele.nextElementSibling;
	if (text.style.display == "block") {
		text.style.display = "none";
		ele.innerHTML = ele.getAttribute('data-initial-text');
	} else {
		text.style.display = "block";
		ele.innerHTML = ele.getAttribute('data-hide-text');
	}
}

<a data-initial-text='Click here for complete details.' data-hide-text='Hide details.' href="javascript:;" onclick="toggle(this);">Click here for complete details.</a>
<div style="display: none">Details</div>

<a data-initial-text='Click here for more information.' data-hide-text='Hide Disclaimer.' href="javascript:;" onclick="toggle(this);">Click here for more information.</a>
<div style="display: none">Information</div>

Answer 3

您必须为元素指定不同的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>

多个隐藏/显示文本

3 个答案: