Div versteckt nach Socket-Verbindung

Ich versuche, einige Divs zu manipulieren. Ich möchte, dass ein div gleich hinter der Socket-Verbindung verschwindet. Zum Beispiel möchte ich, dass div1 nur versteckt wird, wenn der Socket verbunden ist. Wie könnte ich das tun? hier ist der Code:Div versteckt nach Socket-Verbindung

!DOCTYPE HTML> 
<html> 
<head> 
<script> 
var socket = io.connect("127.0.0.1:8080"); 
function allowDrop(ev) { 
    ev.preventDefault(); 
} 

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.id); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var data = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(data)); 
} 
</script> 
</head> 
<body> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 

<img id="drag1" src="img_logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69"> 

</body> 
</html>

Quelle

2016-04-11 Moez Ben Ahmed

haben Sie io.on ('con nection ', function() {$ ("div1"). hide()}); – uzaif

aber Sie müssen es an Backend-Seite emittieren \ – uzaif

Was meinst du mit emittieren es Backend-Seite? –

Sie können einfach einen Sender (emit) auf Ihrem serverseitige Skript und einem Hörer auf Ihrem clientseitige verwenden. Zum Beispiel:

Auf Ihrem serverseitige Skript müssen Sie unter dieser Zeile setzen, etwas Ähnliches wie socket.on("connection", function(...

Diese Zeile:

socket.emit("isConnected", { isConnected: true });

Jetzt auf Ihrem clientseitige Sie müssen Sie auf den Emitter wie folgt hören:

socket.on("isConnected", function(data) { 
    // Receive the 'data' and check if 'isConnected' is true 

    if(data.isConnected == true) { 
     // Now hide the div. 
     getElementById("div1").style.display:"none"; 
    } 
});

Quelle

2016-04-11 13:12:51 Jer

es arbeitete mit: getelementByid ("div1"). Style.display: "none"; –

Also hat es 100% für dich funktioniert? Ich habe meinen Anser mit deinem Code aktualisiert. – Jer

Div versteckt nach Socket-Verbindung

Antwort

Verwandte Themen