Javascript-форум - как при нажатии закрасить элемент и элементы вокруг него

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - как при нажатии закрасить элемент и элементы вокруг него (https://javascript.ru/forum/jquery/61976-kak-pri-nazhatii-zakrasit-ehlement-i-ehlementy-vokrug-nego.html)

как при нажатии закрасить элемент и элементы вокруг него

Ребята SOS!!!! Есть сетка рандомно заполнена от 1 до 3, нужно что бы при нажатии допустим на 1 закрашивался этот див и с шагом на 1 клеточку вокруг него, если 2 то на 2 клеточки и так же если 3, сетка есть, элементы красяться только по одному не могу сделать так что бы вокруг них тоже закрашивалось помогите пожалуйста)
вот код:

$(document).ready(function(){
    var mass = []; 
    var num_cells = prompt('Введите количество ячеек:',10);
    var heigth = num_cells;
    for (var i = 0; i < heigth; i++){
        for (var j = 0; j < num_cells; j++){
            var random = Math.floor(Math.random() * (4 - 1)) + 1;
            if(j===0){
                $('#main').append('<div class="value wrap" id=" ' + j + '_' + i + '_' + random + '"> ' + random + '</div>');
            }else{
                 $('#main').append('<div class="value" id=" ' + j + '_' + i + '_' + random + '"> ' + random  + '</div>');
               
            }
            
        }
    }
    //закрашивание самих элемнетов
     $("#main").on("click", ".value", function(){
         mass = this.id.split('_');
    if(mass[2] == 1){
        $(this).toggleClass("blue");
        
        }
    if(mass[2] == 2){
        $(this).toggleClass("red");
        
        }     
    if(mass[2] == 3){
        $(this).toggleClass("green");
        
    }
    });
});

Svyatik95,
делали бы пример полностью, может кто быстрее откликнется

вот картинка как должно выглядеть

вот картинка как должно примерно выглядеть, тот же смысл и для ячейки с цифрой 3

Svyatik95,
это понятно ... но как хотябы таблица возникает?

рони,
таблица генерируеться путем умножения введенного с клавиатуры числа само на себя, что бы она была равная по сторонам, заполняеться она рандомно от 1 до 3, есть айдишник у каждой ячейки индивидуальный как у матриц, тоесть начиная от позиции 0 0 и заканчивая 9 9, в айди запихал еще значение ячейки что бы можно было проще сравнить

Svyatik95,
точка [x,y] step
пишите цикл выбрать строки от у - step до у + step в них клетки от от x - step до x + step -- выбрали покрасили

Цитата:

Сообщение от Svyatik95

таблица генерируеться путем умножения введенного с клавиатуры числа само на себя

оно как бы да, но где-то тут css с html спрятались :)

[b]рони[ну да)

body, html{
    background-color: white!important;
}
#main{
    position: absolute;
    background-color: white;
    border: 1px solid black;
    display: block;
    margin: auto 0;
    padding: 5px;
	float: left;
	text-align: center;
}
.value{
    position:  relative;
    background-color: white;
    border: 1px solid blue;
    display: block;
	float: left;
	text-align: center;
    width: 20px;
	height: 20px;
    cursor: default;
}
.wrap{
    clear: both;
}

<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style/style.css">
        <script src="js/jquery.js"></script>
    </head>
    <body>
        <div id="main"></div>
        
        <script src="js/js.js"></script>
    </body>
</html>

Svyatik95,
а где классы .red и все остальные да и код в целом, алгоритм вам сказали

Svyatik95,
получилось сделать?