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瞭解更多信息

回答

相關問題