我正在尝试在我的 HTML 页面中添加一个 javascript 函数，每当您单击某个名称时，该函数都会显示更多文本，然后在您再次单击同一名称时将其隐藏，或者最终在您单击时显示不同的文本另一个名字。这是我的 HTML 代码:
<section>
<p id="one" onclick="myFunctionOne()">Cheap table X800</p>
<p id="two" onclick="myFunctionTwo()">Luxury table Z2100</p>
<p id="three" onclick="myFunctionThree()">Chair 101</p>
</section>
这是 JavaScript:
<script>
var oneS = "<ul>"+"<li>ID: 200</li>"+"<li>Name: Cheap table X800</li>"+"<li>Description: This is the cheapest table you can find that still meets its goal. 4 people max.</li>"+"</ul>";
var twoS = "<ul>"+"<li>ID: 201</li>"+"<li>Name: Luxury table Z2100</li>"+"<li>Description: A long table, suitable for a meeting room.</li>"+"</ul>";
var threeS = "<ul>"+"<li>ID: 202</li>"+"<li>Name: Chair 101</li>"+"<li>Description: A very basic but functional chair.</li>"+"</ul>";
var booleanOne=false;
var booleanTwo=false;
var booleanThree=false;
function myFunctionOne() {
//alert("outside if "+booleanOne);
if (!booleanOne){
alert("inside if "+booleanOne);
document.getElementById("one").innerHTML += oneS;
booleanOne=true;
alert(booleanOne);
if (booleanTwo) myFunctionTwo();
if (booleanThree) myFunctionThree();
booleanOne=true;
return;
}
//alert("outside else "+booleanOne);
else if (booleanOne) {
alert("inside else "+booleanOne);
document.getElementById("one").innerHTML = "<p id="+"\"one\""+" onclick="+"\"myFunctionOne()\""+">Cheap table X800</p>";
booleanOne=false;
alert(booleanOne);
return;
}
}
function myFunctionTwo() {
if (!booleanTwo){
document.getElementById("two").innerHTML += twoS;
booleanTwo=true;
if (booleanThree) myFunctionThree();
if (booleanOne) myFunctionOne();
}
else {
document.getElementById("two").innerHTML = "<p id="+"\"two\""+" onclick="+"\"myFunctionTwo()\""+">Luxury table Z2100</p>";
booleanTwo=false;
}
}
function myFunctionThree() {
if (!booleanThree){
document.getElementById("three").innerHTML += threeS;
booleanThree=true;
if (booleanOne) myFunctionOne();
if (booleanTwo) myFunctionTwo();
}
else{
document.getElementById("three").innerHTML = "<p id="+"\"three\""+" onclick="+"\"myFunctionThree()\""+">Chair 101</p>";
booleanThree=false;
}
}
</script>
我知道这可能不是最好的做法，但这是我第一次尝试使用 Javascript/HTML。为了测试目的，我一直在尝试做的是连续点击Cheap table X800 3次，按照程序的逻辑，它应该做的是在第一次点击时显示产品描述，在点击时关闭它第二个，然后在第三个上再次打开它。但是，当我尝试执行此操作时，前两次单击按预期工作，但第三次单击(从我通过警报得到的信息来看)调用 myFunctionOne，进入 if 语句，执行所有内容，进入 else 语句并执行该操作也有一些代码。仅当警报在页面上停止脚本时才可见，否则第三次单击似乎不会执行任何操作。 我该如何解决这个问题？
最佳答案
迭戈的回答非常干净和高效，但是当他发布它时，我正在研究另一个解决方案，该解决方案不如迭戈的好，但可能有一些说明性的好处:
<html>
<body>
<section>
<p id="one" onclick="mainFunc('one')">Cheap table X800</p>
<ul id="oneList" style="display: none;">
<li>ID: 200</li>
<li>Name: Cheap table X800</li>
<li>Description: This is the cheapest table you can find that still meets its goal. 4 people max.</li>
</ul>
<p id="two" onclick="mainFunc('two')">Luxury table Z2100</p>
<ul id="twoList" style="display: none;">
<li>ID: 201</li>
<li>Name: Luxury table Z2100</li>
<li>Description: A long table, suitable for a meeting room.</li>
</ul>
<p id="three" onclick="mainFunc('three')">Chair 101</p>
<ul id="threeList" style="display: none;">
<li>ID: 202</li>
<li>Name: Chair 101</li>
<li>Description: A very basic but functional chair.</li>
</ul>
</section>
<script>
function mainFunc(arg) {
myFunctionOne(arg);
myFunctionTwo(arg);
myFunctionThree(arg);
}
function myFunctionOne(arg) {
var list = document.getElementById('oneList');
if ('one' == arg && list.style.display == 'none'){
list.style.display = 'block';
}
else {
list.style.display = 'none';
}
}
function myFunctionTwo(arg) {
var list = document.getElementById('twoList');
if ('two' == arg && list.style.display == 'none'){
list.style.display = 'block';
}
else {
list.style.display = 'none';
}
}
function myFunctionThree(arg) {
var list = document.getElementById('threeList');
if ('three' == arg && list.style.display == 'none'){
list.style.display = 'block';
}
else {
list.style.display = 'none';
}
}
</script>
</body>
</html>
关于Javascript onclick 函数与 if 和 else 不按其应有的方式工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28993019/