Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.03.2016, 18:23
Новичок на форуме
Отправить личное сообщение для Svyatik95 Посмотреть профиль Найти все сообщения от Svyatik95
 
Регистрация: 18.03.2016
Сообщений: 8

как при нажатии закрасить элемент и элементы вокруг него
Ребята 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Svyatik95,
делали бы пример полностью, может кто быстрее откликнется
Ответить с цитированием
  #3 (permalink)  
Старый 18.03.2016, 19:59
Новичок на форуме
Отправить личное сообщение для Svyatik95 Посмотреть профиль Найти все сообщения от Svyatik95
 
Регистрация: 18.03.2016
Сообщений: 8

вот картинка как должно выглядеть
вот картинка как должно примерно выглядеть, тот же смысл и для ячейки с цифрой 3
Ответить с цитированием
  #4 (permalink)  
Старый 18.03.2016, 20:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Svyatik95,
это понятно ... но как хотябы таблица возникает?
Ответить с цитированием
  #5 (permalink)  
Старый 18.03.2016, 20:06
Новичок на форуме
Отправить личное сообщение для Svyatik95 Посмотреть профиль Найти все сообщения от Svyatik95
 
Регистрация: 18.03.2016
Сообщений: 8

рони,
таблица генерируеться путем умножения введенного с клавиатуры числа само на себя, что бы она была равная по сторонам, заполняеться она рандомно от 1 до 3, есть айдишник у каждой ячейки индивидуальный как у матриц, тоесть начиная от позиции 0 0 и заканчивая 9 9, в айди запихал еще значение ячейки что бы можно было проще сравнить
Ответить с цитированием
  #6 (permalink)  
Старый 18.03.2016, 21:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Svyatik95,
точка [x,y] step
пишите цикл выбрать строки от у - step до у + step в них клетки от от x - step до x + step -- выбрали покрасили
Сообщение от Svyatik95
таблица генерируеться путем умножения введенного с клавиатуры числа само на себя
оно как бы да, но где-то тут css с html спрятались
Ответить с цитированием
  #7 (permalink)  
Старый 19.03.2016, 08:38
Новичок на форуме
Отправить личное сообщение для Svyatik95 Посмотреть профиль Найти все сообщения от Svyatik95
 
Регистрация: 18.03.2016
Сообщений: 8

[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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Svyatik95,
а где классы .red и все остальные да и код в целом, алгоритм вам сказали
Ответить с цитированием
  #9 (permalink)  
Старый 02.04.2016, 17:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,084

Svyatik95,
получилось сделать?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как запустить такую функцию при нажатии на ссылку? varde Общие вопросы Javascript 0 18.07.2015 23:13
как выдать сообщение при нажатии обновления страницы strengerst Общие вопросы Javascript 4 22.10.2014 11:32
Как можно сделать кнопку без ссылки, но с переходом по ссылке при нажатии ? autobuh Элементы интерфейса 10 31.07.2014 05:59
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Подскажите как убрать часть текста при нажатии на кномпу или гиперссылку. potkin Общие вопросы Javascript 6 10.10.2008 07:55