条件が満たされた後で警告を表示

私は以下のコードを変更する際に助けが必要です。私は2つの条件が満たされたときにのみ警告を表示したいと思います。条件が満たされた後で警告を表示

テーブル内のすべての細胞が赤血球の背景色
数イエロー細胞の同数適用されている - 以下のコード

完成が第2条件を満たしていると私は助けを必要と第一要件

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>

出典

2016-08-14 Tariq Sherriff

は、あなたの質問です：テーブルのすべての細胞が持っているときにイベントをトリガーする方法カラークラス（.red_blockまたは.yellow_block）？ –

なぜタイムアウトですか？なぜ$の代わりにJquery？ –

@singebatteur通常は '$'の代わりに 'jQuery'が' $ '変数を使うライブラリの問題を避けるのが最善です。 – Aziz

を示しました。

機能は、多くが着色されているか、全細胞をチェックすると赤が黄色に等しい場合：

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>

出典

2016-08-14 15:19:11 Aziz

tdをクラスblockで、tdをクラスred_blockまたはyellow_blockと数え、以下のように比較する必要があります。

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

出典

2016-08-14 15:16:17 Azim

reds = jQuery('.red_block').length & yellows= jQuery('.yellow_block').lengthクラス以外のred_block & yellow_blockを持つすべての要素を見つけます。私はreds = jQuery('td.red_block').length & yellows= jQuery('td.yellow_block').lengthにそれぞれtdを見つけました。 =>yellowstd.red_block =>reds & td.yellow_blockの

1.Find合計。

2.計算した合計は、reds & yellows =>totalbgです。

3. .block =>totaltdのすべてのtdの合計を見つける。 reds==yellowsそしてtotalbg==totaltd 4.If

は、あなたがあなたの条件をチェックし、各項目のセルがクリックされ、それを呼び出すためにカスタム関数を作成することができ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>

出典

2016-08-14 15:16:32 jonju

条件が満たされた後で警告を表示

答えて

関連する問題