Выбор элементов с условием

@korvova · Регистрация: 17.03.2013

Студворк — интернет-сервис помощи студентам

Доброе время суток, очень нужна помощь написать скрипт.
Есть 8-мь Div в виде квадратиков внутри каждого написанного a,b,c,d,e,I,f,g каждый div синего цвета
Есть два пользователя Player1 и Player2
Каждый пользователь может выбрать только два дива причем не может выбирать тот Div который выбрал другой пользователь, когда например пользователь Player1 кликает по Div , этот div меняется с синего на зеленый цвет , когда пользователь Player2 кликает по Div этот div меняется с синего на красный цвет. Если Player1 выбирают например другой div , то последний див который поменял цвет опять становится синим, а новый соответственно закрашивается в зеленый. Тоже самое и для Player2.
Очень нужна помощь, не как не могу придумать адекватный алгоритм.

@xenohunter · 23.04.2013, 18:04

korvova, используйте метод data. Вот абстрактный пример:

JavaScript
1
2
3
4
5
6
7
8
9
10
var div = $('#someDiv');
 
div.on('click', function () {
    if (!$(this).data('clicked')) {
        // изменяем цвет
        $(this).data('clicked', true);
    } else {
        // ничего не делаем или возвращаем сообщение об ошибке
    }
});

@korvova · 23.04.2013, 18:24 **[ТС]**

извените, но все равно не могу разобратся

Добавлено через 2 минуты
основная проблема которую не могу решить это каким то образом надо запомнить последний элемент, а при выборе другова, этому элементу опять назначить исходны цвет

@Soldado · 23.04.2013, 18:26

Как игроков различить? Чёт и нечет или регистрации?

@korvova · 23.04.2013, 18:29 **[ТС]**

да не важно пусть хоть чет или не чет или регистрация. любой вариант подойдет

@Soldado · 23.04.2013, 18:31

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

Если Player1 выбирают например другой div , то последний див который поменял цвет опять становится синим, а новый соответственно закрашивается в зеленый.

Но в этом случае одновременно выбран одним играком один див, а как же

Каждый пользователь может выбрать только два дива

@korvova · 23.04.2013, 18:37 **[ТС]**

в самом начале пользователь может выбрать два дива, а после уже начинает работать та схема... .

Добавлено через 2 минуты
Хотя блин один див всегда будет получается закрешен... тогда наверно логичней сделать поочереди

@Soldado · 23.04.2013, 21:16

Возможно имелось ввиду сделать цепочкой, например (поясню для одного цвета) - кликаем первый он становится красным, кликаем второй, он тоже становится красным, кликаем третий, он становится красным, а первый обратно становится синим, то есть такая "змейка" .

Для двоих нужно лишь проверять чётный клик или не чётный (i%2) , ещё добавил выход если кликнутый элемент активизирован ранее (не синий сейчас, а красный или зелёный).
В примере .first - недавно кликнутый элемент, .last - кликнутый давно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript" >
 
$(document).ready(function(){
var i=1;    
    
$('.blue').on('click',function(){
    if($(this).is('.red') || $(this).is('.green')){
         return false;  
        }
    else{
        if(i%2){
            // для нечётного 
            //давнему из красных возвращаем синий
            $('.red').filter(".last").removeClass("red").removeClass("last").addClass("blue");
            
            //недавний из красных делаем давним
            $('.red').filter(".first").removeClass("first").addClass("last");
            
            // кликнутому синему присваиваем недавний красный 
            $(this).removeClass("blue").addClass("red").addClass("first");
                }
        else {
            $('.green').filter(".last").removeClass("green").removeClass("last").addClass("blue");
            $('.green').filter(".first").removeClass("first").addClass("last");
            $(this).removeClass("blue").addClass("green").addClass("first");
            }
        
        }
        i++;
    });
    
 
});
    </script>

Код всей страницы - вставляйте и смотрите всё ли так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
    <head>
        <title>Igra</title>
        
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        
        
<script type="text/javascript" >
 
$(document).ready(function(){
var i=1;    
    
$('.blue').on('click',function(){
    if($(this).is('.red') || $(this).is('.green')){
         return false;  
        }
    else{
        if(i%2){
            // для нечётного 
            //давнему из красных возвращаем синий
            $('.red').filter(".last").removeClass("red").removeClass("last").addClass("blue");
            
            //недавний из красных делаем давним
            $('.red').filter(".first").removeClass("first").addClass("last");
            
            // кликнутому синему присваиваем недавний красный 
            $(this).removeClass("blue").addClass("red").addClass("first");
                }
        else {
            $('.green').filter(".last").removeClass("green").removeClass("last").addClass("blue");
            $('.green').filter(".first").removeClass("first").addClass("last");
            $(this).removeClass("blue").addClass("green").addClass("first");
            }
        
        }
        i++;
    });
    
 
});
    </script>
<style>
.blue,.green,.red{
margin-left: 10px;
width:100px;
height:100px;
border:2px solid #001100;
text-align: center;
font-weight: bold;
font-size: 24px;
display: inline-block;
cursor: pointer;
}
.blue{
    background-color: blue;
} 
.red{
    background-color:red;
} 
.green{
    background-color:green;
} 
</style>        
    </head>
    <body>
    <div class="blue"><br/>a</div>
    <div class="blue"><br/>b</div>
    <div class="blue"><br/>c</div>
    <div class="blue"><br/>d</div>
    <div class="blue"><br/>e</div>
    <div class="blue"><br/>i</div>
    <div class="blue"><br/>f</div>
    <div class="blue"><br/>g</div>  
    </body>
</html>

@korvova · 24.04.2013, 01:12 **[ТС]**

Огромное человеческое спасибище!

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@korvova 6 / 2 / 0 Регистрация: 17.03.2013 Сообщений: 90

	Выбор элементов с условием 23.04.2013, 17:49. Показов 1017. Ответов 8 Метки нет (Все метки) Доброе время суток, очень нужна помощь написать скрипт. Есть 8-мь Div в виде квадратиков внутри каждого написанного a,b,c,d,e,I,f,g каждый div синего цвета Есть два пользователя Player1 и Player2 Каждый пользователь может выбрать только два дива причем не может выбирать тот Div который выбрал другой пользователь, когда например пользователь Player1 кликает по Div , этот div меняется с синего на зеленый цвет , когда пользователь Player2 кликает по Div этот div меняется с синего на красный цвет. Если Player1 выбирают например другой div , то последний див который поменял цвет опять становится синим, а новый соответственно закрашивается в зеленый. Тоже самое и для Player2. Очень нужна помощь, не как не могу придумать адекватный алгоритм. 0

@korvova 6 / 2 / 0 Регистрация: 17.03.2013 Сообщений: 90
	23.04.2013, 18:24 [ТС]
	извените, но все равно не могу разобратся Добавлено через 2 минуты основная проблема которую не могу решить это каким то образом надо запомнить последний элемент, а при выборе другова, этому элементу опять назначить исходны цвет 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	23.04.2013, 18:26
	Как игроков различить? Чёт и нечет или регистрации? 0

@korvova 6 / 2 / 0 Регистрация: 17.03.2013 Сообщений: 90
	23.04.2013, 18:29 [ТС]
	да не важно пусть хоть чет или не чет или регистрация. любой вариант подойдет 0

@korvova 6 / 2 / 0 Регистрация: 17.03.2013 Сообщений: 90
	23.04.2013, 18:37 [ТС]
	в самом начале пользователь может выбрать два дива, а после уже начинает работать та схема... . Добавлено через 2 минуты Хотя блин один див всегда будет получается закрешен... тогда наверно логичней сделать поочереди 0

@korvova 6 / 2 / 0 Регистрация: 17.03.2013 Сообщений: 90
	24.04.2013, 01:12 [ТС]
	Огромное человеческое спасибище! 0