Brauchen Sie Hilfe beim Aufrufen einer Funktion

Ich habe einen Anfänger und habe Schwierigkeiten, den folgenden Code ausführen zu lassen. Wenn ich die Rücksetztaste drücke, scheint die draw() Funktion, die ich definierte, nicht zu laufen/irgendeine Ausgabe zu produzieren. Das vorherige Raster wird gelöscht, aber das neue wird nicht an seiner Stelle erstellt.Brauchen Sie Hilfe beim Aufrufen einer Funktion

Ich kann nicht herausfinden, warum. Jede Hilfe würde sehr geschätzt werden.

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Etch-A-Sketch</title> 
     <link rel="stylesheet" type="text/css" href="CSS/styles.css"/> 
     <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script src = "JS/jquerry.js"></script> 
     <meta charset="utf-8"/> 
    </head> 
    <body> 
     <h1>Etch-A-Sketch</h1> 
     <h3>Cameron Watson</h3> 
     <div id='container'></div> 
     <div class='divbut'>RESET</div> 
    </body> 
</html>

#container {  
    border: 1px solid black; 
    height: 720px; 
    width: 720px; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 
.grid { 
    height: 45px; 
    width: 45px; 
    float: left; 
} 
h1 { 
    text-align: center; 
} 
h3 { 
    text-align: center; 
} 
.divbut { 
    border: 1px solid black; 
    height: 45px; 
    width: 65px; 
    text-align: center; 
}

$(document).ready(function() { 
    draw(16); 

    $('.grid').hover(function(){ 
     $(this).css("background-color", "#00ffff"); 
    }); 

    $(".divbut").click(function(){ 
     $('div').remove('.grid'); 
     draw(16); 
    }); 
}); 

function draw(count){ 
    for (x = 0; x < count; x++) { 
     for (y = 0; y < count; y++) { 
      $('<div>').addClass('grid').appendTo('#container'); 
     } 
    } 
};

Quelle

2016-05-04 Cameron00

Warum Sie 'haben schrieb **' in jquery Teil? Nur zum Hervorheben für uns? – hmd

Zweitens sollten Sie '$ ('div.grid'). Remove();' anstelle von '$ ('div'). Remove ('. Grid');' sonst werden alle div-Elemente entfernt. – hmd

Yeah nur Hervorhebung - es ist nicht im ursprünglichen Code., Danke für den Rat über die remove() Aussage. Das Problem wurde behoben, aber die Funktion wurde noch nicht geladen. – Cameron00

Das Problem liegt daran, dass Sie das Original .grid Element entfernen, die das hover Ereignis gebunden war. Wenn Sie die neuen Elemente .grid erstellen, ist das Ereignis nicht mehr gebunden. Um dies zu lösen Sie einen delegierte Ereignishandler verwenden müssen:

$('#container').on('mouseenter', '.grid', function(){ 
    $(this).css("background-color", "#00ffff"); 
});

Working example

Sie müßten die mouseeenter Veranstaltung in diesem Fall Haken als hover kein Standard-Ereignis ist (es ist eine kombinierte Nutzung von mouseenter und mouseleave).

Beachten Sie auch, dass durch @hmd angegeben, wie sollten Sie direkt auf die $('.grid') Elemente entfernen rufen:

$(".divbut").click(function() { 
    $('.grid').remove(); 
    draw(16); 
});

Quelle

2016-05-04 12:00:44

Vielen Dank. Jetzt wie geplant arbeiten. – Cameron00

Kein Problem, froh zu helfen –

Brauchen Sie Hilfe beim Aufrufen einer Funktion

Antwort

Verwandte Themen