Как заставить цикл присваивать новое значение с каждой итерацией?

Question

[Mr_Sergo]

Доброго времени суток. Помогите, пожалуйста, понять как при прохождении очередной итерации присваивать значение переменной следующему элементу. Извиняюсь, но не знаю как правильно сформулировать вопрос. Вообщем есть разметка:

<div id="box_points">
    <div id="1" class="point"></div>
    <div id="2" class="point"></div>
    <div id="3" class="point"></div>
</div>

Далее мне необходимо каждому дочернему элементу DIVа с id="box_points" присвоить:

id="1" "onclick=move(0)"
id="2" "onclick=move(-100)"
id="3" "onclick=move(-200)"

Функция move():

function move(step) {
    $("#SLIDE").css("margin-left",step+unit);
}

Я мог бы прописать вручную: GetElementById("1") и т.д., но так как количество элементов может меняться то прописывать вручную не подходит, поэтому я делаю следующее (цикл):

var a = $(".point"),
    c = -100;

for (i = 0; i < 3; i++){
    a[i].onclick = function(){
        move(c);
        c = c - 100;
    };
}

Идея такая что бы при клике на id="1" происходил marginLeft на отметку "-100", при клике на id="2" происходил marginLeft на отметку "-200" ну и так далее. В результате я получаю: кликая по любому элементу с class="point" происходит marginLeft на отметку "-100" независимо по какому id был клик. Собственно сам вопрос: как присваивать, каждую итерацию, новое значение соответствующему id ?, а не одно и тоже значение как это делает цикл. Может по какому то другому пути пойти не прибегая к циклу. И вообще через цикл реально такое осуществить? Помогите пожалуйста, третий день почти не сплю.

Answer 1

[Александр Талалаев]

Легче всего пойти другим путем, при генерации html, у каждого дочернего div сделать дополнительный атрибут с данными о том какой margin ты хочешь, например:

<div id="box_points">
    <div id="1" class="point" data-margin='0'></div>
    <div id="2" class="point" data-margin='-100'></div>
    <div id="3" class="point" data-margin='-200'></div>
</div>

И тогда код js примерно так:

$('.point').click(function() {
    var step = $(this).attr('data-margin');
    move(step);
});

Comments

[Mr_Sergo]

Так же вместо data-margin='0', data-margin='-100', data-margin='-100', можно повесить и onclick=move(-100) и т.д.. Это вариант, но мне нужно делать это автоматом, то есть мне не известно заранее сколько будет DIV-ов. Объясню. Я делаю слайдер блоков. Задумка в том что бы я поставил в слайдер 5 блоков с контентом, появилось 5 кружков (point)- переключателей. Захотел поставил 10 и появилось 10 кружков (point)- переключателей. Количество DIV-ов у меня в скрипте генерируется автоматически в зависимости от того сколько блоков с контентом. Слайдер картинок, блоков. Еще называют его каруселью, ну я думаю вы поняли о чем я.

[Mr_Sergo]

Пологаю что это надо делать как то через цикл, но не пойму что я пропускаю или неправильно делаю что бы работало как задуманно.

[Александр Талалаев]

zlojnaxa: ну так кружки же появляются не волшебным образом, вы их как инициализируете, при их создании и нужно прописать логику работы.
А так в слайдерах обычно эти кружки привязывают каким-либо образом к слайду(или через нумерацию, или еще как), а затем на основе заданных параметров слайдера(допустим при инициализации слайдера задана опция ширина каждого слайда) мы просто считаем все в js, сколько именно нам нужно сделать margin.
При разной ширине слайдов немного сложнее, но общая логика та же, только в этом случае считают ширину предыдущих слайдов.
Короче говоря не усложняй логику. У тебя уже есть цикл, который идет при создании слайдов и кружочков, дополнительный лишний, не хочешь делать через дополнительный атрибут, вычисляй ширину слайда, у тебя кстати уже в айди есть циферки, даже если там будет что-то вроде 'slide1', из этой инфы тоже можно спарсить цифру и умножить на ширину слайда добытую динамически.

[Mr_Sergo]

Александр Талалаев:
Вот на этом этапе я узнаю сколько будет point-ов

$("#SLIDE>.box").clone()                        // в SLIDE находим все элементы с классом box и копируем их
.empty()                                        // полностью очищаем от содержимого
.attr('id', '')                                 // меняем все их id на пустоту
.attr('class', 'point')                         // меняем все их class на point
.appendTo("#box_points");                       // вставляем в div "POINTS"

Далее задаю им id:

var a = $(".point");

for (i = 0; i < 3; i++){
    a[i].id = (i+1);
}

В каком месте скрипта лучше задавать margin? И каким примерно образом это сделать?

[Александр Талалаев]

zlojnaxa: интересный способ, с одной стороны clone относительно производительный, но у тебя по факту все равно куча изменений, так что преимущества clone уменьшаются.
Ну и странный цикл, где у тебя только до 3, а как ты находишь сколько всего элементов, чтобы все раздать?
Короче попробуй использовать each для инициализации своих кружочков. Либо сразу, без clone, повесь его на #SLIDE>.box и он пройдется по всем ним, ты сможешь все сделать, либо уже по новым клонирвоанным проходись, с теми же целями.
Лучше первый вариант, примерно

/*бокс для точек*/
var pointbox=$("#box_points");
var margin = -100;

$("#SLIDE>.box").each(function (index, value) {
  pointbox.append('<div id="' + index +1 + '" class="point" data-margin="'+index*margin+'"></div>');
});

Как то так.
Ну и повторюсь, второй способ это по номеру точки, определять номер слайда, а дальше просто зная ширину слайда делать умножение для текущего сдвига.

[Mr_Sergo]

Это первый мой скрипт на js, поэтому все так коряво в логике и в написании, с опытом все наладится.
var len = $('.box').length- так я нахожу сколько всего элементов. Ну и, естественно, подставляю len в цикл.
Спасибо, вроде все понял, буду пробовать.

[Mr_Sergo]

Александр Талалаев:
Да уж, мой гавноподход с гавнокодом даже рядом не стоит с вашим.
Попробовал, вник, все оказалось проще чем предполагал. Спасибо вам, вот прям... ОГРОМЕННОЕ спасибо. Наконец-то все вышло по задумке.