Как узнать какой светофор сейчас обрабатываеться ?
Доброго времени суток !
Есть такой вопрос. Демо У меня есть 13 светофоров, которые отображаются в тегаx <span>. Я хочу узнать какой именно спан сейчас обрабатываеться и узнать его цвет. Если можно что бы результат выводился через alert(). Заранее спасибо |
Цитата:
|
Я буду на канвасе отрисовывать эти светофоры.
То есть мне нужно знать у какого светофора какой цвет. Отрисовка скорее всего будет происходить внутри функции визуализации светофоров. Просто у меня сейчас есть массив с фазами для каждого светофора (спана), и еще будет массив с координатами этого светофора на канвасе, например: traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]]; И внутри визуализации переменная-итератор будет обращаться к массиву с локациями и эта переменная должна соотвествовать светофору который отображаеться и еще получать цвет этого светофора. как то так |
Цитата:
Вот, например, получатель цвета первого светофора - http://jsfiddle.net/BETEPAH/cNQWW/ |
Здесь итет отображение каждого светофора:
for (var a = 0, f; a < traffic_lights.length; a++) {
var g = traffic_lights[a];
f = $("#c" + a);
(function (a, d) {
var b = 0,
time = 0;
return function s() {
time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
a.html(time);
time--;
window.setTimeout(s, 1e3);
}
})(f, g)();
}
Еще у меня есть массив с координатами для каждого светофора: traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]]; Каждый раз как будет изменяться цвет в span будет прорисовываться этот светофор на канвасе. Я себе вижу это как то так:
traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]];
for (var a = 0, f; a < traffic_lights.length; a++) {
var g = traffic_lights[a];
var tl = traffic_locations[a];//получаем расположение на канвасе светофора, который сейчас обрабатываеться
f = $("#c" + a);
(function (a, d) {
var b = 0,
time = 0;
return function s() {
time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
a.html(time);
time--;
canvas.fillRect(tl.x1,tl.y1,tl.x2,tl.y2,d[b].color);//отрисовываем этот светофор на канвасе
window.setTimeout(s, 1e3);
}
})(f, g)();
}
|
Если я правильно понял, нужно фиксировать изменения цвета каждого светофора? Так? http://jsfiddle.net/BETEPAH/cNQWW/3/
|
Именно оно.
Только у меня мозги кипят, когда я пробую глазами выискать айдишник светфора. Поможете это встроить под этот скрипт:
traffic_locations = [[x1:10,y1:10,x2:20,y2:20],[x1:110,y1:110,x2:120,y2:120]];
for (var a = 0, f; a < traffic_lights.length; a++) {
var g = traffic_lights[a];
var tl = traffic_locations[a];//получаем расположение на канвасе светофора, который сейчас обрабатываеться
f = $("#c" + a);
(function (a, d) {
var b = 0,
time = 0;
return function s() {
time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
a.html(time);
time--;
canvas.fillRect(tl.x1,tl.y1,tl.x2,tl.y2,d[b].color);//отрисовываем этот светофор на канвасе
window.setTimeout(s, 1e3);
}
})(f, g)();
}
? |
Цитата:
time || ... я ее немного переделал, посмотрите код на фидле айдишник получаем так
a.attr('id')
|
И еще вопрос из любопытности:
что означает эти две линии ||:
time || (a.css({"background-color": d[b].color}), time = d[b].time, b = ++b % d.length);
Никак не могу додуматься... |
Цитата:
Логическое "или" (эти две линии) обрабатывается слева направо и прерывается, когда встречает первое истинное условие. В данном случае, этот код проверяет есть ли значение у time, отличное от нуля. Если time == 0 или time == null или time == undefined или time == false, код идет дальше и выполняет то, что находится за двумя линиями (меняет цвет фона, устанавливает счетчик времени...) А если у time есть значение, то что идет за двумя линиями, игнорируется К сведению, если встретите два амперсанда, они обрабатываются до первого ложного значения. |
Огромное вам спасибо :victory:
|
Помогите добить скрипт.
Залил сюда:http://mw3.vn.ua/greenwave/traffic_lights.html Получилось синхронно обращаться к фазам светфора и к координатам. Но непонятно почему выкидывает ошибку. Мои новые наработки можно увидеть между 71й и 104й строкой |
Переписал немного функцию, чтоб было понятнее
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span {padding-left:50px; width: 50px; height: 50px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
traffic_lights = [
[{color:'green' ,time:9 },
{color:'yellow' ,time:6 },
{color:'red' ,time:19 },],
[{color:'green' ,time:9 },
{color:'yellow' ,time:6 },
{color:'red' ,time:19 },],
[{color:'green',time:30},
{color:'yellow',time:6},
{color:'red',time:17},],
[{color:'green',time:30},
{color:'yellow',time:6},
{color:'red',time:17},],
[{color:'red',time:29},
{color:'yellow',time:6},
{color:'red',time:27},],
[{color:'red',time:29},
{color:'yellow',time:6},
{color:'red',time:27},],
[{color:'green',time:32},
{color:'yellow',time:6},
{color:'red',time:40},],
[{color:'green',time:32},
{color:'yellow',time:6},
{color:'red',time:40},],
[{color:'green',time:37},
{color:'yellow',time:6},
{color:'red',time:33},],
[{color:'green',time:37},
{color:'yellow',time:6},
{color:'red',time:33},],
[{color:'red',time:23},
{color:'yellow',time:3},
{color:'green',time:80},
{color:'yellow',time:6},],
[{color:'red',time:56},
{color:'yellow',time:3},
{color:'green',time:21},
{color:'yellow',time:6},],
]
var traffic_locations = [
{x1:47,y1:63,x2:70,y2:84},
{x1:47,y1:103,x2:70,y2:124},
{x1:47,y1:194,x2:70,y2:215},
{x1:47,y1:234,x2:70,y2:255},
{x1:47,y1:363,x2:70,y2:384},
{x1:47,y1:403,x2:70,y2:424},
{x1:47,y1:578,x2:70,y2:599},
{x1:47,y1:618,x2:70,y2:639},
{x1:47,y1:709,x2:70,y2:730},
{x1:47,y1:749,x2:70,y2:770},
{x1:47,y1:878,x2:70,y2:899},
{x1:47,y1:918,x2:70,y2:939},
]
for (var a = 0, f; a < traffic_lights.length; a++) {
var g = traffic_lights[a];
f = $("#c" + a);
(function (el, colorsForThis, num) {
var b = 0,
time = 0;
return function s() {
if(!time) {
var coord = traffic_locations[num];//перехожу к координатам светофоров
var toWrite = '';
toWrite += '(' + num; //номер светофора
toWrite += ' - ' + coord.x1 + '.' + coord.y1 + '.' + coord.x2 + '.' + coord.y2 + ' - '; //координаты
toWrite += colorsForThis[b].color + ') '//цвет
$('#log').html($('#log').html() + toWrite);
el.css({"background-color": colorsForThis[b].color});
time = colorsForThis[b].time;
b = ++b % colorsForThis.length;
}
el.html(time);
time--;
window.setTimeout(s, 1e3);
}
})(f, g, a)();
}
})
</script>
</head>
<body>
<span id="c0"></span>
<span id="c1"></span><br><br>
<span id="c2"></span>
<span id="c3"></span><br><br>
<span id="c4"></span>
<span id="c5"></span><br><br>
<span id="c6"></span>
<span id="c7"></span><br><br>
<span id="c8"></span>
<span id="c9"></span><br><br>
<span id="c10"></span>
<span id="c11"></span>
<div id="log"></div>
</body>
</html>
|
Цитата:
у вас массив координат содержит массивы, в каждом из которых по одному элементу - объект с координатами. А надо чтоб массив содержал не массивы, а объекты. На пальцах: Вместо: [[{}],[{}],[{}],[{}]] надо [{},{},{},{}] Ну, или оставить как есть, но общаться соответствующе var tl = traffic_locations[a][0];//перехожу к координатам светофоров |
| Часовой пояс GMT +3, время: 15:03. |