Ширина блоков из списка
Уважаемые коллеги, доброго времени суток.
Суть вопроса такова: есть разметка - <ul> <li></li> <li></li> <li></li> <li></li> </ul> далее есть код JS:
/*объект значений ширины*/
var wid = {
one: {
value: 150
},
two: {
value: 100
},
three: {
value:50
},
four: {
value:400
}
}
/* список элементов*/
var elems = document.querySelectorAll('ul li');
/*Далее необходимо задать всем li из списка ширину - значения в объекте wid*/
Вопрос. Как это сделать в цикле???? Помгите плиз. заранее спасибо |
Цитата:
|
// for (var s in components){
// var percent = Math.round((components[s].value*100)/components[s].parent);
// for (var i =0;i < spans.length;i++) {
// spans[i].setAttribute('style', 'width:' + percent + '%');
// }
// }
|
for (var s in components){
var percent = Math.round((components[s].value*100)/components[s].parent);
for (var i =0;i < spans.length;i++) {
spans[i].setAttribute('style', 'width:' + percent + '%');
}
}
|
вот так не работает((((
|
вернее вот так правильно
for (var s in wid){
var percent = Math.round((wid[s].value*100)/40);
for (var i =0;i < elems.length;i++) {
elems[i].setAttribute('style', 'width:' + percent + '%');
}
}
|
Роман Андреевич, делай сразу полный пример. Огрызки никому не нужны.
|
Цитата:
|
Цитата:
elems[i].style.width=percent + '%'; |
Полный пример:
/*объект значений ширины*/
var wid = {
one: {
value: 150
},
two: {
value: 100
},
three: {
value:50
},
four: {
value:400
}
}
var elems = document.querySelectorAll('ul li');
/*перебираем ключи у объекта ширин*/
for (var s in wid){
var percent = Math.round(wid[s].value/100));
}
/*добавляем каждому li свою ширину из объекта*/
for (var i =0;i < elems.length;i++) {
elems[i].setAttribute('style', 'width:' + percent + '%');
}
В итоге он всем выдает 50% |
Откуда взялось 50% понять не могу.
|
ksa,
Если даже сделать elems[i].style.width=percent + '%'; все равно выдаст 50% ширины. |
Цитата:
|
Цитата:
|
понимание простое, есть список li, и есть значения, нужно каждому li поставить сове значение.
|
Цитата:
Вот как выглядит именно полный пример. ;)
<!DOCTYPE html>
<style type='text/css'>
li {
height: 10px;
border: 1px solid;
}
</style>
<script type='text/javascript'>
var wid = {
one: {
value: 150
},
two: {
value: 100
},
three: {
value:50
},
four: {
value:400
}
}
</script>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type='text/javascript'>
var elems = document.querySelectorAll('ul li');
var i=0;
for (var s in wid) {
elems[i++].style.width=wid[s].value + 'px';
}
</script>
|
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> </head> <body> <ul class="balance element"> <li class="title"></li> <li class="total"></li> </ul> </body> </html>
;(function() {
"use strict";
function Machine() {
var main_balance_total = document.querySelector('.total'),
components = {
water: {
value: 0,
},
coffee: {
value: 0,
},
sugar: {
value: 0,
},
milk: {
value: 0,
},
caps: {
value: 0,
}
}
this.default = function() {
_addParams();
_checkParams();
}
function _addParams() {
var total = document.createElement('ul');
main_balance_total.append(total);
for (var key in components) {
var li_total = document.createElement('li');
var percent = Math.round((components[key].value/100);
li_total.classList.add('balance_item');
li_total.innerHTML = '<span class="' + key + '"></span>';
total.append(li_total);
}
}
function _checkParams() {
var span = {
water: main_balance_total.querySelector('span.water'),
coffee: main_balance_total.querySelector('span.coffee'),
sugar: main_balance_total.querySelector('span.sugar'),
milk: main_balance_total.querySelector('span.milk'),
caps: main_balance_total.querySelector('span.caps')
},
spans = main_balance_total.querySelectorAll('span');
for (var i =0;i < spans.length;i++) {
for (var s in components){
var percent = Math.round((components[s].value*100)/components[s].parent);
spans[i].style.width = percent + '%';
}
}
}
}
var machine = new Machine();
machine.default();
})();
|
Роман Андреевич, порядок ключей в обьекте не гарантируется браузерами, поэтому надёжнее массив
[{value: 150},{value: 100}, .....]
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul{
width: 20%;
}
li{
height: 7px;
margin: 7px;
background-color: #0000FF;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
/*объект значений ширины*/
var wid = {
one: {
value: 150
},
two: {
value: 100
},
three: {
value:50
},
four: {
value:400
}
}
/* список элементов*/
var elems = document.querySelectorAll('ul li');
Object.keys(wid).forEach(function(el,i) {
elems[i].style.width = wid[el].value+'%';
});
/*Далее необходимо задать всем li из списка ширину - значения в объекте wid*/
});
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
|
Спасибо, вроде разобрался
|
| Часовой пояс GMT +3, время: 00:27. |