我正在尝试列一个 list 。当我单击列表中的每个项目时，将显示说明。现在我的代码仅显示项目，当我单击某个项目时，会显示所有项目的描述。谁能帮我解决这个问题吗？
<script type="text/javascript">
function moreInfo(){
var para= document.createElement("p")
var divObj = document.getElementById("p1");
divObj.appendChild(para);
var divObj = document.getElementById("p2");
divObj.appendChild(para);
var divObj = document.getElementById("p3");
divObj.appendChild(para);
var divObj = document.getElementById("p4");
divObj.appendChild(para);
var txt = document.createTextNode("This product is good");
para.appendChild(txt);
var txt = document.createTextNode("This product is bad");
para.appendChild(txt);
var txt = document.createTextNode("This product is pretty");
para.appendChild(txt);
var txt = document.createTextNode("This product is ugly");
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
<p onclick="moreInfo()">
Good
</p>
<div id="p2" class="divStyle">
<p onclick="moreInfo()">
Bad
</p>
<div id="p3" class="divStyle">
<p onclick="moreInfo()">
Pretty
</p>
<div id="p4" class="divStyle">
<p onclick="moreInfo()">
Ugly
</p>
</div>
最佳答案
您可以在调用 JavaScript 函数时传递要显示的值。正如你所说，你是 Javascript 的初学者，我重新安排如下。希望这有帮助
<head>
<script type="text/javascript">
function moreInfo(p){
var para= document.createElement("p")
var divObj = document.getElementById("results");
divObj.innerHTML = ""; // remove the previous clicks results
divObj.appendChild(para);
var txt = document.createTextNode("This product is " + p);
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
<p onclick="moreInfo('good')"> Good </p>
</div>
<div id="p2" class="divStyle">
<p onclick="moreInfo('bad')"> Bad</p>
</div>
<div id="p3" class="divStyle">
<p onclick="moreInfo('pretty')"> Pretty</p>
</div>
<div id="p4" class="divStyle">
<p onclick="moreInfo('ugly')"> Ugly</p>
</div>
<div id='results'></div>
关于javascript onclick 获取更多信息，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37107729/