Javascript onclick für mehr Info

Ich versuche, eine Liste zu machen. Wenn ich auf jedes Element in der Liste klicke, wird eine Beschreibung angezeigt. Im Moment zeigt mein Code nur die Elemente an, und wenn ich auf ein Element klicke, werden Beschreibungen aller Elemente angezeigt. Kann mir jemand helfen, dieses Problem zu beheben?Javascript onclick für mehr 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>

Quelle

2016-05-09 shyn

Sie können den Wert übergeben, den Sie anzeigen möchten, wenn Sie Ihre Javascript-Funktion aufrufen. Wie Sie sagten, Sie sind ein Anfänger von Javascript, das ich wie unten neu geordnet habe. hoffen, dass dies vor der Anzeige neues Element erstellt hilft

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

Quelle

2016-05-09 04:56:01 Shani

Vielen Dank !!! – shyn

Ich habe gerade versucht Ihren Code, und versucht, Ihre requirement.The verbleibende Teil des Elements zu entfernen ist.

Hier ist das Code-Snippet.

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

Bitte lassen Sie mich wissen, ob es Ihnen hilft oder nicht.

Dank

Quelle

2016-05-09 05:09:09 Codec

Vielen Dank. Der Code funktionierte, aber damit der erste funktionierte, musste ich nur den RemoveChild-Teil entfernen – shyn

Ich habe meine Antwort aktualisiert und es funktioniert perfekt – Codec

Sie können den Code, indem Sie ein wenig bit.Create ein Ergebnis p für die Anzeige aktueller klicken description.Use this als param zusammenfassen für aktuelles Element erhalten und innerHTML für innere Saite zu erhalten.

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

Quelle

2016-05-09 05:10:00

Vielen Dank für Ihre Hilfe ~ – shyn

Es gibt ein paar Dinge zu beachten:

Sie die gleiche Variable (var divObj) viermal Neuzuordnung.
Das gleiche gilt für den var txt.
Im Idealfall würden Sie jede einmal zuweisen und dann Ihre Zeichenfolge dynamisch basierend auf dem Objekt, auf das geklickt wurde, erstellen.

Anmerkung: zugewiesen i die Funktion des Objekts ‚Fenster‘ (window.moreInfo (string)), aber man konnte immer noch verwenden (Funktion Moreinfo (string)) mehr Infos hier: https://developer.mozilla.org/en-US/docs/Web/API/Window hier ist eine mögliche Lösung (gibt es viele - nur diese eine Hoffnung, folgen könnte leicht):

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

Quelle

2016-05-09 05:14:14 abigwonderful

Vielen Dank !! Das hat genau so funktioniert, wie ich es wollte !! Aber ich habe versucht, "No Parameter" zu löschen und es funktionierte immer noch IDK, wenn das in Ordnung war – shyn

yeah ich habe nur hinzugefügt, um Ihnen zu zeigen, was passieren könnte, wenn die Funktion nichts wie folgt erhalten: 'moreInfo()' – abigwonderful

Wenn das für Sie funktioniert, können Sie es als Arbeitslösung markieren! – abigwonderful

Ihr JS-Code ersetzen diese mit:

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); 
    } 
}

und Ersetzen Sie Ihre HTML-Code mit unter:

Quelle

2016-05-09 05:25:18

Vielen Dank für Ihre Hilfe !! – shyn

Ich habe Ihren Code von Close Div und schreiben Sie Javascript, um an bestimmte Elemente anfügen Sie klicken.

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

Quelle

2016-05-09 05:29:56 vibol

Vielen Dank. Es funktionierte!! – shyn

In Ihrem htmldiv sind überhaupt nicht ist balanced.There kein Schluss tag für einige der div. Als Ergebnis wurde es zu einem verschachtelten 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); 
}

Klicken Sie Here um zu sehen, für Ihre Hilfe Live-Action

Quelle

2016-05-09 05:48:15 brk

Vielen Dank für Ihre Hilfe !!! – shyn

Javascript onclick für mehr Info

Antwort

Verwandte Themen