Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Скрипт уменьшения параметра left (https://javascript.ru/forum/events/56440-skript-umensheniya-parametra-left.html)

bobrdobr 16.06.2015 15:47

Скрипт уменьшения параметра left
 
Есть такая конструкция
<a href="#" class="first"></a>
<a href="#" class="second"></a>
<ul>
<li></li>
<li></li>
...
</ul>


Нужно написать скрипт, который, после клика по a.second, если количество li>8 и <=16 добавлял li стиль уменьшал left для li на 100%. Если li>16 и <=24 - ещё на 100%.
То есть в самом начале имеется li{left: 0;}. Если элементов i 10(например) и мы кликаем по .second из left должно вычитаться 100%.

При клике на prev - left увеличивается на 100%, пока не достигнет 0.

У самого навыки в js чуть больше нуля. Прошу помочь

Sigizmund2012 17.06.2015 12:32

ТЗ крайне странное, но я попробовал сделать:
<button class="first">First</button>
<button class="second">Second</button>
<ul id="list">
    <li>item_1</li>
    <li>item_2</li>
    <li>item_3</li>
    <li>item_4</li>
    <li>item_5</li>
    <li>item_6</li>
    <li>item_7</li>
    <li>item_8</li>
    <li>item_9</li>
</ul>

<script>

var list = document.getElementById('list');
var first = document.querySelectorAll('.first')[0];
var second = document.querySelectorAll('.second')[0];
var childrens;
var max;
var oldValue;

second.onclick = function (e) {
  if( list.children.length > 8 && list.children.length <= 16){
    childrens = list.children;
    max = childrens.length;
    for (var i = 0; i < max; i++) {
        oldValue = parseInt(childrens[i].style.marginLeft);
        if(!oldValue){
            oldValue = 0;
        }
        childrens[i].style.marginLeft = oldValue - 100 + '%';
    }
  }
  else if( list.children.length > 16 && list.children.length < 24){
    childrens = list.children;
    max = childrens.length;
    for (var j = 0; j < max; j++) {
        oldValue = parseInt(childrens[j].style.marginLeft);
        if(!oldValue){
            oldValue = 0;
        }
        childrens[j].style.marginLeft = oldValue - 200 + '%';
    }
  }  
};

first.onclick = function (e) {
    childrens = list.children;
    max = childrens.length;
    for (var i = 0; i < max; i++) {
        oldValue = parseInt(childrens[i].style.marginLeft);
        if(!oldValue || oldValue === 0){
            oldValue = 0;
            return;
        }
        else{
        childrens[i].style.marginLeft = oldValue + 100 + '%';
        }
    }  
};

</script>

Правда я margin-left использовал, а не left. Если именно left надо, замените в коде все marginLeft на left.


Часовой пояс GMT +3, время: 06:07.