Показать предупреждение после выполнения условий

Мне нужна помощь в изменении нижеприведенного кода. Я бы хотел, чтобы он отображал предупреждение только при выполнении двух условий.Показать предупреждение после выполнения условий

все ячейки в таблице, были применены цвет фона
количество красных клеток равное количество желтых клеток - Завершена

ниже код соответствует 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 s.

1.Find всего td.red_block =>reds & td.yellow_block =>yellows.

2.Calculate итог reds & yellows =>totalbg.

3.Find всего td с классом .block =>totaltd;

4.Если reds==yellowstotalbg==totaltd И тогда показать 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

Показать предупреждение после выполнения условий

ответ

Смежные вопросы