javascript onclick获取更多信息
javascript onclick for more Info
我正在尝试列出一个列表。当我点击列表上的每个项目时，说明就会显示出来。现在，我的代码只显示项目，当我单击一个项目时，会显示所有项目的描述。有人能帮我解决这个问题吗？
<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>
您可以通过稍微更改来总结代码。创建一个结果p以显示当前点击描述。使用this作为获取当前元素的参数，使用innerHTML作为获取内部字符串的参数。
<script type="text/javascript">
function moreInfo(t){
var para= document.getElementById("result");
para.innerHTML = "";//to set empty for new click
var txt = document.createTextNode("This product is "+t.innerHTML);
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
<p onclick="moreInfo(this)">
Good
</p>
<div id="p2" class="divStyle">
<p onclick="moreInfo(this)">
Bad
</p>
<div id="p3" class="divStyle">
<p onclick="moreInfo(this)">
Pretty
</p>
<div id="p4" class="divStyle">
<p onclick="moreInfo(this)">
Ugly
</p>
</div>
<p id="result"></p>
有几点需要注意：
- 您要重新分配同一个变量（vardivObj）四次
- var txt也是如此
- 理想情况下，您应该为每个项目分配一次，然后根据单击的项目动态创建字符串
注意：我将函数分配给了"window"对象（window.moreInfo（string）），但您仍然可以在此处使用（function moreInfo（字符串））更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window这里有一个可能的解决方案（有很多——只是希望这个可能很容易遵循）：
<head>
<script type="text/javascript">
window.moreInfo = function(string){
var target = event.target;
var para= document.createElement("p");
var txt = document.createTextNode("This product is " + string);
target.appendChild(para).appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
<p onclick="moreInfo('good')">
Good
</p>
<div id="p2" class="divStyle">
<p onclick="moreInfo('bad')">
Bad
</p>
<div id="p3" class="divStyle">
<p onclick="moreInfo('pretty')">
Pretty
</p>
<div id="p4" class="divStyle">
<p onclick="moreInfo('ugly')">
Ugly
</p>
</div>
<div id="p4" class="divStyle">
<p onclick="moreInfo()">
No parameter
</p>
</div>
</body>
用以下代码替换JS代码：
function moreInfo(e){
var str = e.currentTarget.parentElement.id;
switch(str) {
case "p1":
var obj = document.getElementById("p1");
var para= document.createElement("p");
para.appendChild(document.createTextNode("This product is good"))
obj.appendChild(para);
break;
case "p2":
obj = document.getElementById("p2");
para= document.createElement("p");
para.appendChild(document.createTextNode("This product is bad"))
obj.appendChild(para);
break;
case "p3":
obj = document.getElementById("p3");
para= document.createElement("p");
para.appendChild(document.createTextNode("This product is pretty"))
obj.appendChild(para);
break;
case "p4":
obj = document.getElementById("p4");
para= document.createElement("p");
para.appendChild(document.createTextNode("This product is ugly"))
obj.appendChild(para);
break;
default:
alert("clicked on "+str);
}
}
并将您的HTML代码替换为以下代码：
<div id="p1" class="divStyle">
<p onclick="moreInfo(event)"> Good </p>
</div>
<div id="p2" class="divStyle">
<p onclick="moreInfo(event)"> Bad </p>
</div>
<div id="p3" class="divStyle">
<p onclick="moreInfo(event)"> Pretty </p>
</div>
<div id="p4" class="divStyle">
<p onclick="moreInfo(event)"> Ugly </p>
</div>
我通过关闭div来编辑您的代码，并编写javascript来附加到您单击的特定元素。
<script type="text/javascript">
function moreInfo(object){
var status = object.innerHTML;
var txt = document.createTextNode("This product is " + status);
var para= document.createElement("p");
var divObject = object.parentNode;
var allP = divObject.childNodes;
// prevent double add
if (allP.length > 1) {
divObject.removeChild(divObject.childNodes[2]);
}
divObject.appendChild(para);
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
<p onclick="moreInfo(this)">
Good
</p>
</div>
<div id="p2" class="divStyle">
<p onclick="moreInfo(this)">
Bad
</p>
</div>
<div id="p3" class="divStyle">
<p onclick="moreInfo(this)">
Pretty
</p>
</div>
<div id="p4" class="divStyle">
<p onclick="moreInfo(this)">
Ugly
</p>
</div>
</div>在您的html中，div根本不平衡。对于某些div，不存在闭合tag。因此，它变成了嵌套的DOM。
var _getClickedElement =document.getElementsByTagName('p');
// Attaching eventlistener to each p tag
for(var i =0; i<_getClickedElement.length;i++){
var _m = i; //because of event delegation binding i with the element
_getClickedElement[_m].addEventListener('click',function(event){
var _getParentId = this.parentNode.id; // get parent Id of click element
_showDesc(_getParentId);
})
}
// This function will create p to show the description
function _showDesc(parentId){
var text = "";
switch(parentId) {
case "p1":
text ="This product is good";
break;
case "p2":
text ="This product is bad"
break;
case "p3":
text ="This product is pretty"
break;
case "p4":
text ="This product is ugly"
break;
}
//Remove any previous description tag.
var _getPrevElement =document.getElementById('desc');
if(_getPrevElement !== null){
_getPrevElement.parentNode.removeChild(_getPrevElement);
}
var para= document.createElement("p");
para.id = "desc"
para.innerHTML =text;
document.getElementById(parentId).appendChild(para);
}
单击此处查看实时
我刚试过你的代码，并尝试过你的需求。剩下的部分是删除在显示新元素之前创建的元素。
这是代码片段。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
function moreInfo(ClickedId){
var myElem = document.getElementById('extraP');
if (myElem !== null) {
myElem.remove();
}
var para= document.createElement("p")
para.setAttribute("id", "extraP");
if(ClickedId == "p1"){
var divObj = document.getElementById("p1");
var txt = document.createTextNode("This product is good");
divObj.appendChild(para);
}
if(ClickedId == "p2"){
var divObj = document.getElementById("p2");
var txt = document.createTextNode("This product is bad");
divObj.appendChild(para);
}
if(ClickedId == "p3"){
var divObj = document.getElementById("p3");
var txt = document.createTextNode("This product is pretty");
divObj.appendChild(para);
}
if(ClickedId == "p4"){
var divObj = document.getElementById("p4");
var txt = document.createTextNode("This product is ugly");
divObj.appendChild(para);
}
para.appendChild(txt);
}
</script>
</head>
<body>
<div id="p1" class="divStyle">
<p onclick="moreInfo(this.parentNode.id)">
Good
</p>
<div id="p2" class="divStyle">
<p onclick="moreInfo(this.parentNode.id)">
Bad
</p>
<div id="p3" class="divStyle">
<p onclick="moreInfo(this.parentNode.id)">
Pretty
</p>
<div id="p4" class="divStyle">
<p onclick="moreInfo(this.parentNode.id)">
Ugly
</p>
</div>
</html>
请告诉我这对你有没有帮助。
感谢
相关文章：
- 使用html2canvas获取基本信息
- 使用javascript后台脚本获取Yotutube频道信息
- 如何在没有回调的情况下获取有关元素的信息
- 获取本地时间的JS日期，日期对象中没有时区详细信息
- 获取html表单信息并使用ajax将其推送到PHP
- javascript onclick获取更多信息
- 如何获取数组详细信息另一页
- javascript可以获取或设置打印机信息
- 如何用java脚本从领英获取详细信息
- jQuery:获取图像加载错误的详细信息
- 从脚本中的动态(javascript）网页获取信息
- 在弹出窗口中获取信息
- JQuery/Javascript来获取给定URL的Http Header详细信息
- 使用javascript/Jquery获取HTML5文件的详细信息
- 如何使用API从多个IMDB ID获取电影信息
- 使用Javascript从Strobe Media Playback获取统计信息
- 在单击父复选框的同时获取子复选框的详细信息
- 获取下拉信息的按钮
- 如何验证表单并将信息获取到另一个表单
- Linux环境下Sublime Text 3的console.log输出信息获取方法
