Wie wird eine Warnung ausgegeben, wenn auf jede Zelle in einer Tabelle geklickt wurde?

-7

Wenn alle Zellen in meiner Tabelle angeklickt wurden, möchte ich eine Warnung ausgeben.Wie wird eine Warnung ausgegeben, wenn auf jede Zelle in einer Tabelle geklickt wurde?

<td id="1" onclick="this.style.backgroundColor = 'Red';">1</td> 
<td id="2" onclick="this.style.backgroundColor = 'Red';">2</td> 
<td id="3" onclick="this.style.backgroundColor = 'Red';">3</td> 
<td id="4" onclick="this.style.backgroundColor = 'Red';">4</td> 
<td id="5" onclick="this.style.backgroundColor = 'Red';">5</td>

(Ich mache den Hintergrund rot, so dass ich weiß, dass es geklickt wurde). Dies ist das Skript, das ich versucht habe zur Arbeit zu kommen:

<script> 
    $(document).ready(function() { 
    $('#1' && '#2' && '#3' && '#4' && '#5').click(function() { 
     alert('Bingo!'); }); 
    }); 
</script>

Wenn ich auf der Zellzahl 5 sofort klicken, wird der Alarm erscheint. Was ich will ist, wenn jede Zelle bereits angeklickt ist, nur dann sollte die Warnung angezeigt werden.

Quelle

2017-11-01 Syahrul Romadhon

Wissen Sie, wie Elemente mit jQuery ausgewählt werden? – evolutionxbox

Lesen Sie die [Dokumentation zu jQuery] (https://api.jquery.com/multiple-selector/), um zu erfahren, wie Sie mehrere Selektoren ausführen können. Ihr Code ist nur das '$ ('# 5') .click (function() {' basierend auf der Funktionsweise des UND-Operators – epascarello

Willkommen bei Stack Overflow! Bitte lesen Sie die [Hilfe], insbesondere [* Wie frage ich eine gute Frage? *] (/ help/how-to-ask) Recherchiere (Suche/Hilfe/Suche) nach verwandten Themen zu SO.Versuche, die Arbeit zu machen *** Wenn du es schaffst stecken und kann nicht loswerden nach mehr Forschung und Suche, post eine [mcve] von Ihrem Versuch und sagen Sie genau, wo Sie stecken sind.Das obengenannte zeigt nicht annähernd genug Forschung, Debugging und Kodierung Aufwand. –

Wenn Sie jede Zelle einzeln auf einen roten Hintergrund setzen möchten, wird dies wie folgt ausgeführt und wird nach dem Klicken auf alle 5 angezeigt.

$('#one, #two, #three, #four, #five').click(function() { 
 
    $(this).toggleClass("redbg"); 
 
    
 
    if($('.redbg').length == 5) 
 
     alert('Bingo!'); 
 
});

.redbg 
 
{ 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td id="one">1</td> 
 
    <td id="two">2</td> 
 
    <td id="three">3</td> 
 
    <td id="four">4</td> 
 
    <td id="five">5</td> 
 
    </tr> 
 
</table>

Auch als T. J. Crowder zeigte in den Kommentaren unten. Das Starten einer ID mit einem numerischen Wert ist für CSS ungültig. Sie können das mit Klassenbezeichnern, aber nicht mit IDs tun. Ich habe Ihre IDs in diesem Beispiel geändert.

Quelle

2017-11-01 16:46:16 abney317

Wert gelesen: ['toggleClass'] (http://api.jquery.com/toggleClass/). –

Beachten Sie auch, dass dieser Selektor ungültig ist. jQuery toleriert es, aber das ändert nichts daran, dass es ungültig ist. In CSS kann ein ID-Selektor nicht mit einer Ziffer beginnen. (IDs können - die einzige Einschränkung für eine ID ist, dass sie keine Leerzeichen enthalten darf - aber kein CSS-ID-Selektor.) Wahrscheinlich lohnt es sich, das aufzurufen und die korrekte Vorgehensweise zu zeigen. (Am einfachsten ist es, IDs nicht einfach mit Ziffern zu beginnen; in diesem Fall ist es sogar besser, stattdessen eine Klasse zu verwenden.) –

'#1' && '#2' && '#3' && '#4' && '#5' entspricht "# 5". && auf Strings funktioniert nicht so.

Was Sie wahrscheinlich tun möchten, ist etwas wie alle für den Klick zu beobachten, ändern Sie die Klasse beim Klicken auf "angeklickt", und überprüfen Sie dann, dass 5 Zellen die "angeklickt" -Klasse haben.

Quelle

2017-11-01 16:39:49 TKoL

Sie müssen nicht alle IDs für eine Auswahl fest codieren; Wir können auch HTML-Elemente auswählen.

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    .bgColor { 
     background-color: red; 
    } 
    </style> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
      $("td").click(function(){ 
      $(this).toggleClass("bgColor"); 

     if($('.bgColor').length == 5) 
      alert('Bingo!'); 
      }); 
    }); 
    </script> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td id="1">1</td> 
     <td id="2">2</td> 
     <td id="3">3</td> 
     <td id="4">4</td> 
     <td id="5">5</td> 
     </tr> 
    </table> 
    </body> 
    </html>

Quelle

2017-11-01 17:10:34

Sollte nur ein Kommentar zu meiner Antwort sein. – abney317

Wie wird eine Warnung ausgegeben, wenn auf jede Zelle in einer Tabelle geklickt wurde?

Antwort

Verwandte Themen