06.02.2015, 02:40
|
|
Аспирант
|
|
Регистрация: 05.02.2015
Сообщений: 51
|
|
<html>
<head>
</head>
<body>
<div id="a0">1</div>
<div id="a1">2</div>
<div id="a2">3</div>
<div id="a3">4</div>
<div id="a4">5</div>
<div id="a5">6</div>
<script>
divs=document.querySelectorAll("div")
f=function () {
var n=(+this.id[1])
;[].forEach.call(divs, function(div){div.style.background=(+div.id[1]<=n) ? "blue" : ""})
}
;[].forEach.call(divs, function(div){div.onclick=f})
</script>
</body>
</html>
Последний раз редактировалось freee, 06.02.2015 в 02:47.
|
|
06.02.2015, 09:58
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
Сообщение от freee
|
<html>
<head>
</head>
<body>
<div id="a0">1</div>
<div id="a1">2</div>
<div id="a2">3</div>
<div id="a3">4</div>
<div id="a4">5</div>
<div id="a5">6</div>
<script>
divs=document.querySelectorAll("div")
f=function () {
var n=(+this.id[1])
;[].forEach.call(divs, function(div){div.style.background=(+div.id[1]<=n) ? "blue" : ""})
}
;[].forEach.call(divs, function(div){div.onclick=f})
</script>
</body>
</html>
|
В этом примере я вообще ничего не понял |
|
06.02.2015, 10:32
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
Сообщение от Zyuzka
|
|
В этом примере я вообще ничего не понял
|
теже два цикла плюс нелюбовь к var и ограничение: не более 9 элементов )))
вот вам ещё вариант через замыкание, чтоб не доставать данные из id (количество строк любое наличие id необязательно)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<script>
var d = document.querySelectorAll("div"),
f = function(a) {
return function() {
[].forEach.call(d, function(b, c) {
b.style.background = a >= c ? "blue" : ""
})
}
};
[].forEach.call(d, function(a, b) {
a.onclick = f(b)
});
</script>
</body>
</html>
Последний раз редактировалось рони, 06.02.2015 в 10:36.
|
|
06.02.2015, 10:46
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
|
Сообщение от рони
|
теже два цикла плюс нелюбовь к var и ограничение: не более 9 элементов )))
вот вам ещё вариант через замыкание, чтоб не доставать данные из id (количество строк любое наличие id необязательно)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<script>
var d = document.querySelectorAll("div"),
f = function(a) {
return function() {
[].forEach.call(d, function(b, c) {
b.style.background = a >= c ? "blue" : ""
})
}
};
[].forEach.call(d, function(a, b) {
a.onclick = f(b)
});
</script>
</body>
</html>
|
Сейчас буду разбирать=) Спасибо.
В итоге у меня вышло вот так
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
header{
width: 225px;
height: 17px;
border: 1px solid black;
}
header>div{width: 13px;
height: 15px;
border:1px solid black;
background-color:white;
margin-left:0px;
float:left;
}
</style>
<script>
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.onclick = function() {
var color = "linear-gradient(to right, blue, blue)"
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
if (divs == this) color = '';
}
}
}
}
</script>
</head>
<body onload="test()">
<header>
<div id="a0">10</div>
<div id="a1">11</div>
<div id="a2">12</div>
<div id="a3">13</div>
<div id="a4">14</div>
<div id="a5">15</div>
<div id="a6">16</div>
<div id="a7">17</div>
<div id="a8">18</div>
<div id="a9">19</div>
<div id="a10">20</div>
<div id="a11">21</div>
<div id="a12">22</div>
<div id="a13">23</div>
<div id="a14">24</div>
</header>
</body>
</html>
Теперь думаю как вынести текст из div'ов над ними и по клику на текст красилась ячейка
|
|
06.02.2015, 11:02
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
Zyuzka,
не копируйте код в своё сообщениее целиком это засоряет просмотр.
|
Сообщение от Zyuzka
|
|
Теперь думаю как вынести текст из div'ов над ними и по клику на текст красилась ячейка
|
не понял
|
|
06.02.2015, 11:14
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
|
Сообщение от рони
|
Zyuzka,
не копируйте код в своё сообщениее целиком это засоряет просмотр.
не понял
|
В моём коде div'ы выстроены inline-block'ом. Весь header представляет собой слайдер=) Div'ы сейчас текст который означает "час времени". Мне нужно этот текст вынести из div над ним, что бы по клику на текст цвет менялся у div к которому он принадлежит. Пока всё что я надумал это в header'е сделать ещё такую же полосу из div и как то их связать.
Пример:
<header>
<div class="time">10</div>
<div class="time">11</div>
<div class="time">12</div>
<div class="time">13</div>
<div class="time">14</div>
<div class="time">15</div>
<div id="a0"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
</header>
Последний раз редактировалось Zyuzka, 06.02.2015 в 11:27.
|
|
06.02.2015, 12:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
Zyuzka,
не осилил )))
сделайте лучше пример того что хотите получить в результате
|
|
06.02.2015, 12:31
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
|
Сообщение от рони
|
Zyuzka,
не осилил )))
сделайте лучше пример того что хотите получить в результате
|
 Наша функция
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.onclick = function () {
var color = "linear-gradient(to right, blue, blue)"
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
if (divs == this) color = '';
}
}
}
}
<div id="h0">10</div>
<div id="h1">11</div>
<div id="h2">12</div>
<div id="h3">13</div>
<div id="a0"></div>
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
Сейчас bgColor срабатывает для div id( a+j) по клику на div id( a+j). Нужно срабатывание для div id( a+j) по клику на div id( h+j). При этом bgColor div c id(h+j) не должен меняться
Последний раз редактировалось Zyuzka, 06.02.2015 в 12:34.
|
|
08.02.2015, 16:36
|
|
Интересующийся
|
|
Регистрация: 05.02.2015
Сообщений: 20
|
|
up теме  |
|
08.02.2015, 16:39
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,124
|
|
|
Zyuzka,
либо я вас не понял либо вам нужно заменить в 4 строке a на h
|
|
|
|
