onclick reset und showhide

Question

Ich habe eine Schaltfläche zum Zurücksetzen und eine Verknüpfung zum Verbergen des Bildes. onclick wird dafür verwendet. Jetzt muss ich diesen 'Verbergen' Link benutzen, um sowohl 'verstecken' als auch 'zurücksetzen' auf 'onclick' zu machen.

<script> 
 
    function myFrame6() { 
 
     var ifr = document.getElementsByName('frame6')[0]; 
 
     ifr.src = ifr.src; 
 
    } 
 
</script> 
 
<p> 
 
    <input type="button" value="Reset" onclick="myFrame2()" class="btn btn-primary"> 
 
    <a href="#" id="p6-hide" class="hideLink" onclick="showHide('p6');return false;">Hide image</a> 
 
</p>

Answer 1

können Sie entweder die Reset-Funktionsaufruf hinzufügen (Ich vermute, das ist myFrame2()), um die Verbindung des Onclick durch ein Semikolon getrennt wie folgt:: Der Code ist unten angegeben

onclick="showHide(); myFrame2()" 

Oder rufen Sie einfach myFrame2(); und showHide() von der gleichen Funktion.

Answer 2

Sie müssen eine Art der Überprüfung verwenden, um zwischen zwei Modi zu wechseln. Ich werde Ihnen die genaue Antwort nicht geben, weil Sie keine genaue Frage gestellt haben.

Sie fügen das Element auf Ihrer Veranstaltung als Argument

onclick="toggleMe(this)" 

Dann auf der Funktion

function toggleMe(element){ 

    if (!element.istoggled){ 
    //show element 

    element.istoggled == true 
    } 

    if(element.istoggled){ 
    //hide element 

    element.istoggled == false; 
    } 

} 

Die Attribut des HTML-Elements durch den Parameter referenziert isToggled Element ist benutzerdefiniert und über Punktnotation definiert, können Sie setAttribute und getAttribute verwenden, wenn Sie präzise sein wollen.

Answer 3

Da Sie jQuery in den Tags aufgeführt haben, nehme ich an, dass Sie es verwenden, daher werde ich eine einfache Antwort dafür geben.

JQuery bietet Funktion Toggle genannt, die sowohl implementiert hide und zeigen Funktionalität darin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
     $("img").toggle(); 
 
    }); 
 
}); 
 
</script> 
 
<button>Toggle between hiding and showing the image</button> 
 

 
<img src="https://www.google.com.co/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"/>