javascript onclick了解更多信息

我正在尝试创建一个列表。当我点击列表中的每个项目时，将显示说明。现在我的代码只显示项目，当我点击一个项目时，显示所有项目的描述。任何人都可以帮我解决这个问题吗？javascript onclick了解更多信息

<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>

来源

2016-05-09 shyn

当您调用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>

来源

2016-05-09 04:56:01 Shani

非常感谢你的帮助！ – shyn

我只是想你的代码，并试图您requirement.The剩余部分去除显示新元素之前创建的元素。

这是代码片段。

<!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>

请让我知道它是否对您有帮助。

感谢

来源

2016-05-09 05:09:09 Codec

非常感谢。代码工作，但第一个工作，我只需要删除RemoveChild部分 – shyn

我已经更新了我的答案，它是完美的工作 – Codec

您可以通过改变一点点bit.Create用于显示当前点击description.Use this作为PARAM结果p总结你的代码获取当前元素和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>

来源

2016-05-09 05:10:00

谢谢你帮助我〜 – shyn

这里有几点需要注意：

你重新分配相同的变量（VAR divObj）的四倍。
var txt也是如此。
理想情况下，您可以分配一次，然后根据哪个项目被点击来动态创建您的字符串。

注：我分配功能的“窗口”对象（window.moreInfo（串）），但你仍然可以使用（功能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>

来源

2016-05-09 05:14:14 abigwonderful

谢谢！这工作完全像我想做的事情！但我试图删除“无参数”，它仍然工作，所以idk，如果这是好做 – shyn

是的，我只是补充说，如果函数没有得到任何东西传入像这样会发生什么：'moreInfo（）' – abigwonderful

如果这个工作适合你，随时标记为工作解决方案！ – abigwonderful

这个替换您的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>

来源

2016-05-09 05:25:18

非常感谢您的帮助！ – shyn

我编辑了你的代码，通过关闭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; 
 
    \t 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>

来源

2016-05-09 05:29:56 vibol

非常感谢。有效！！ – shyn

在你htmldiv是不是在所有balanced.There是一些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); 
}

点击Here看到真人

来源

2016-05-09 05:48:15 brk

非常感谢您的帮助！ – shyn

javascript onclick了解更多信息

回答

相关问题