Meldung anzeigen, wenn die Bedingungen erfüllt sind

Ich benötige Hilfe beim Ändern des folgenden Codes. Ich möchte, dass nur dann eine Warnung angezeigt wird, wenn zwei Bedingungen erfüllt sind.Meldung anzeigen, wenn die Bedingungen erfüllt sind

alle Zellen in der Tabelle haben eine Hintergrundfarbe
Anzahl der roten Blutkörperchen gleiche Anzahl von Yellow Zellen angewendet worden - Abgeschlossene

Der folgende Code erfüllt die zweite Anforderung und ich brauche Hilfe bei der 1. Anforderung

jQuery(function() { 
 

 
    var brush = "white_block"; 
 

 
    jQuery('input.block').on('click', function() { 
 
    brush = jQuery(this).data('brush'); 
 
    }); 
 

 
    jQuery('td').on('click',function() { 
 

 
    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush); 
 

 
    var reds = jQuery('.red_block').length, 
 
     yellows = jQuery('.yellow_block').length; 
 

 
    if (reds == yellows) { 
 
     setTimeout(function() {alert("Finished!")}, 100); 
 
    } 
 

 
    }); 
 

 
});

.block { 
 
    border: thin solid #000000; 
 
    width: 59px; 
 
    height: 57px; 
 
} 
 
.white_block { 
 
    background-color: #FFFFFF; 
 
} 
 
.red_block { 
 
    background-color: #FF0000; 
 
} 
 
.yellow_block { 
 
    background-color: #FFFF00; 
 
} 
 

 
table { 
 
    margin:1em 0 0; 
 
}

<html> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" class="block white_block" data-brush="white_block"> 
 
<input type="button" class="block yellow_block" data-brush="yellow_block"> 
 
<input type="button" class="block red_block" data-brush="red_block"> 
 

 
<table> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
</table> 
 

 
</html>

Quelle

2016-08-14 Tariq Sherriff

Ist Ihre Frage: Wie Ereignis auslösen, wenn alle Zellen der Tabelle haben eine Farbklasse (.red_block oder .yellow_block)? –

Warum Timeout? Warum Jquery anstelle von $? –

@singebatteur normalerweise 'jQuery' anstelle von' $ 'ist am besten zu vermeiden, dass widersprüchliche Bibliothek Probleme, die auch die' $ 'Variable verwenden können. – Aziz

Sie können eine benutzerdefinierte Funktion erstellen Sie Ihre Bedingungen zu überprüfen und jedes Element rufen eine Zelle geklickt wird.

Die Funktion wird für Gesamtzellen überprüfen, wie viele sind farbig und wenn die Roten gleich Gelb:

jQuery(function() { 
 
    var brush = "white_block"; 
 
    jQuery('input.block').on('click', function() { 
 
    brush = jQuery(this).data('brush'); 
 
    }); 
 
    function cellCheck() { 
 
    var reds = jQuery('#cellsTable .red_block').length, 
 
     yellows = jQuery('#cellsTable .yellow_block').length, 
 
     cells_colored = reds + yellows, 
 
     cells_total = jQuery('#cellsTable td').length; 
 
    
 
    // condition 1: all colored 
 
    if (cells_colored == cells_total) { 
 
     setTimeout(function() {alert("All Colored");}, 100); 
 
    } 
 
    // condition 2: equal colors 
 
    if (reds == yellows) { 
 
     setTimeout(function() {alert("Equal colors");}, 100); 
 
    } 
 
    // condition 3: both conditions 
 
    if (cells_colored == cells_total && reds == yellows) { 
 
     setTimeout(function() {alert("Finished!");}, 100); 
 
    } 
 
    } 
 
    jQuery('td').on('click', function() { 
 
    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush); 
 
    cellCheck(); 
 
    }); 
 
});

.block { 
 
    border: thin solid #000000; 
 
    width: 59px; 
 
    height: 57px; 
 
} 
 
.white_block { 
 
    background-color: #FFFFFF; 
 
} 
 
.red_block { 
 
    background-color: #FF0000; 
 
} 
 
.yellow_block { 
 
    background-color: #FFFF00; 
 
} 
 
table { 
 
    margin: 1em 0 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" class="block white_block" data-brush="white_block"> 
 
<input type="button" class="block yellow_block" data-brush="yellow_block"> 
 
<input type="button" class="block red_block" data-brush="red_block"> 
 

 
<table id="cellsTable"> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
</table>

Quelle

2016-08-14 15:19:11 Aziz

Sie müssen alle td mit Klasse block und alle td mit Klasse red_block oder yellow_block zählen und dann wie folgt vergleichen.

var brush = "white_block"; 

$('input.block').on('click', function() { 
    brush = $(this).data('brush'); 
}); 

$('td').on('click', function() { 

    $(this).removeClass('white_block yellow_block red_block').addClass(brush); 

    var all = $('td.block').length, 
     colored = $('td.red_block, td.yellow_block').length, 
     reds = $('td.red_block').length, 
     yellows = $('td.yellow_block').length; 

    if (reds == yellows && all == colored) { 
     setTimeout(function() { 
      alert("Finished!") 
     }, 100); 
    } 
});

Updated Fiddle

Quelle

2016-08-14 15:16:17 Azim

reds = jQuery('.red_block').length & yellows= jQuery('.yellow_block').length werden alle Elemente mit Klassen red_block & yellow_block andere als finden. Ich änderte dies zu reds = jQuery('td.red_block').length & yellows= jQuery('td.yellow_block').length jeweiligen nur zu finden td s.

1.Suchen insgesamt td.red_block =>reds & td.yellow_block =>yellows.

2.Calculate insgesamt reds & yellows =>totalbg.

3. Gesamtmenge aller td mit Klasse .block =>totaltd;

4.Falls reds==yellows Und totalbg==totaltd dann zeigen alert()

jQuery(function() { 
 

 
    var brush = "white_block"; 
 

 
    jQuery('input.block').on('click', function() { 
 
    brush = jQuery(this).data('brush'); 
 
    }); 
 

 
    jQuery('td').on('click',function() { 
 

 
    jQuery(this).removeClass('white_block yellow_block red_block').addClass(brush); 
 

 
    var reds = jQuery('td.red_block').length, 
 
     yellows = jQuery('td.yellow_block').length, 
 
     totaltd=$('td.block').length, 
 
     totalbg = reds + yellows; 
 
     
 

 
    if (reds == yellows && totalbg==totaltd) { 
 
     setTimeout(function() {alert("Finished!")}, 100); 
 
    } 
 

 
    }); 
 

 
});

.block { 
 
    border: thin solid #000000; 
 
    width: 59px; 
 
    height: 57px; 
 
} 
 
.white_block { 
 
    background-color: #FFFFFF; 
 
} 
 
.red_block { 
 
    background-color: #FF0000; 
 
} 
 
.yellow_block { 
 
    background-color: #FFFF00; 
 
} 
 

 
table { 
 
    margin:1em 0 0; 
 
}

<html> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" class="block white_block" data-brush="white_block"> 
 
<input type="button" class="block yellow_block" data-brush="yellow_block"> 
 
<input type="button" class="block red_block" data-brush="red_block"> 
 

 
<table> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
    <tr> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block yellow_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    <td class="block red_block"></td> 
 
    </tr> 
 
</table> 
 

 
</html>

Quelle

2016-08-14 15:16:32 jonju

Meldung anzeigen, wenn die Bedingungen erfüllt sind

Antwort

Verwandte Themen