Grid Sizer mit jQuery

Question

Ich schreibe mir ein kleines Spiel in JavaScript, mit jQuery. Das Spiel hat eine Tafel mit Zellen darin, ähnlich wie Minesweeper: Der Benutzer klickt auf eine Zelle und seine Daten müssen in irgendeiner Weise geändert werden. Jede Zelle wird durch ein einfaches Bild dargestellt, aber es sind noch mehr Daten damit verbunden.

Was ich in erster Linie brauche ist, wenn der Benutzer eine Zelle klickt, muss ich irgendwie die Zeile und Spalte, die angeklickt wurde bestimmen, manipulieren Sie die Daten entsprechend und ändern Sie die Ansicht. Wenn Sie den Click-Handler auf jede einzelne Zelle setzen, erscheint dies wie ein Overkill. Wenn Sie jedoch den Click-Handler auf die gesamte Tabelle setzen, wird PITA, um zu bestimmen, auf welche Tabellenzelle geklickt wurde.

Wie würden Sie mit solch einer Situation umgehen? Vielleicht gibt es schon ein Plugin, das die ganze Sache vereinfachen kann?

Answer 1

Dies ist ein perfektes Beispiel für eine großartige Verwendung der live()-Funktion. Um die x- und y-Positionen finden müssen Sie nur die Anzahl der Zellen über Zeilen zählen, bevor oder diese:

$('#minesweeperTable td').live('click', function() { 
    var $this = $(this), 
     xPos = $this.prevAll('td').length, 
     yPos = $this.closest('tr').prevAll('tr').length 
    ; 
    // your code here 
}); 

Das beste daran ist, dass, egal wie viele Zellen, die Sie haben, gibt es nur ein Ereignis Handler, was für viel bessere Leistung macht.

Answer 2

Fügen Sie den Click-Handler für die gesamte Tabelle hinzu. Verwenden Sie event.target, um die angeklickte Zelle zu erhalten. Fügen Sie jeder Zelle ein Attribut hinzu, das Ihnen sagt, welche Zeile/Spalte es ist. Auf diese Weise müssen Sie kein massives/schweres JS ausführen, um es herauszufinden.

psuedocode:

$("table.game").click(function(e){ 
    var cell = e.target; 
    var pos = $(cell).attr("name").split["_"]; 
    var x = pos[0]; 
    var y = pos[1]; 
    return false; 
}); 

Markup:

<table class="game"> 
    <tbody> 
    <tr> 
    <td name="0_0"> 
    sdfasdfa 
    <td> 
    </tr> 
    </tbody> 
</table> 

Anmerkung: mit einem Namen mit einer Ziffer ist nicht gut starten, so fix wie

benötigt

Answer 3

Wenn Ihre Tabelle dynamisch erzeugt (js oder PHP zum Beispiel) Sie könnten jede Zelle mit einer Klasse und/oder ID-Attribute, die Ihnen die Informationen gaben.

Ich weiß nicht, wie Sie Ihre Zellen so in Pseudo-Code darstellen:

<table id="board"> 
    <row> 
    <cell id="cell-0x0" /> 
    <cell id="cell-0x1" /> 
    ... 
    </row> 
    <row> 
    <cell id="cell-1x0" /> 
    ... 
    </row> 
    ... 
</table> 

dann in jQuery:

$('#board cell').click(function(){ 
    var coord = $(this).attr('id').substr(5).split('x'); 
    // do your stuff 
}); 

Answer 4

Wenn Sie zu viele Tabellenzellen haben die Click-Handler einstellen würde schwer, aber Sie können einen Workaround zur Berechnung der Box-Nummer von Mausklick event.page.X und event.page.Y machen dies gibt Koordinaten angeklickt Pixel auf Ihrem Bildschirm und Sie können berechnen, welche Box unter diesem Pixel ist.

Oder

Sie können auch die bekommen den Knoten geklickt verwenden event.target.

auschecken jquery.event.

hoffe es hilft, Sinan.

Answer 5

Die Click-Event-Bubbles und das ursprüngliche Ziel können in der srcElement-Eigenschaft des Event-Objekts gefunden werden (ich denke, oder es könnte eine andere Eigenschaft sein, aber es ist da).