<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>
|
Цитата:
|
Цитата:
вот вам ещё вариант через замыкание, чтоб не доставать данные из 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'ов над ними и по клику на текст красилась ячейка |
Zyuzka,
не копируйте код в своё сообщениее целиком это засоряет просмотр. Цитата:
|
Цитата:
Пример:
<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,
не осилил ))) сделайте лучше пример того что хотите получить в результате |
Цитата:
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) не должен меняться |
up теме:(
|
Zyuzka,
либо я вас не понял либо вам нужно заменить в 4 строке a на h |
| Часовой пояс GMT +3, время: 11:27. |