Форум

Svyatik95 · #1 (**permalink**) 18.03.2016, 18:23

Ребята 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");
        
    }
    });
});

рони · #2 (**permalink**) 18.03.2016, 19:25

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

Svyatik95 · #3 (**permalink**) 18.03.2016, 19:59

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

рони · #4 (**permalink**) 18.03.2016, 20:00

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

Svyatik95 · #5 (**permalink**) 18.03.2016, 20:06

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

рони · #6 (**permalink**) 18.03.2016, 21:02

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

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

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

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

Svyatik95 · #7 (**permalink**) 19.03.2016, 08:38

[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>

рони · #8 (**permalink**) 19.03.2016, 11:44

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

рони · #9 (**permalink**) 02.04.2016, 17:33

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

Форум

Справочник

Discord чат

Курсы javascript