Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Функция eq(i).mouseover(function(){...}) не реагирует на изменение i... (https://javascript.ru/forum/jquery/5149-funkciya-eq-i-mouseover-function-%7B-%7D-ne-reagiruet-na-izmenenie-i.html)

oxymo 19.09.2009 22:31

Функция eq(i).mouseover(function(){...}) не реагирует на изменение i...
 
Всем доброго времени суток.
Пишу скрипт галерейки и столкнулся с проблемой.
HTML код галереи выглядит следующим образом:
<div class="imgs_block_big">
            <div id="1" class="img_item"></div>
            <div id="2" class="img_item"></div>
            <div id="3" class="img_item"></div>
            <div id="4" class="img_item"></div>
            <div id="5" class="img_item"></div>
            <div id="6" class="img_item"></div>
        </div>

С соответствующими стилями и форматированием. Всё это дело оживляется следующим кодом:
imgarr = ["../../images/test_big0.jpg",
                              "../../images/test_big1.jpg",
                              "../../images/test_big0.jpg",
                              "../../images/test_big1.jpg",
                              "../../images/test_big0.jpg",
                              "../../images/test_big1.jpg"];
            var param = {
                first : 1,
                last  : 6,
                curnt : 3
            };
            function Start()
              {
              //отображает первоначальные 3 элемента: центральную картинку и 2 "кнопки"
              }
            $(document).load(function(){
                Start();
            });
            $(document).ready(function(){
                
                $("div.img_item").eq(param.curnt).mouseover(function(){
                    $("div.img_item").eq(param.curnt).animate({"left": "-=20px"}, "fast");
                });
                $("div.img_item").eq(param.curnt).mouseout(function(){
                    $("div.img_item").eq(param.curnt).animate({"left": "+=20px"}, "fast");
                });
                $("div.img_item").eq(param.curnt-2).mouseover(function(){
                    $("div.img_item").eq(param.curnt-2).animate({"left": "+=20px"}, "fast");
                });
                $("div.img_item").eq(param.curnt-2).mouseout(function(){
                    $("div.img_item").eq(param.curnt-2).animate({"left": "-=20px"}, "fast");
                });
                $("div.img_item").eq(param.curnt).click(function(){
                    var w_Gal = document.documentElement.clientWidth > 1020 ? document.documentElement.clientWidth : 1020;
                    var betw_space = (w_Gal/2-150)+240;
                    $("div.img_item").eq(param.curnt).css("left", (w_Gal-60)+"px");
                    if ((param.curnt) != param.last) {
                        $("div.img_item").eq(param.curnt+1).css("left", (w_Gal+betw_space-80)+"px");
                        $("div.img_item").eq(param.curnt+1).css("background-image", "url('"+imgarr[param.curnt+1]+"')");
                        $("div.img_item").eq(param.curnt+1).css("visibility", "visible");
                    }
                    for (var i = param.curnt-2; i <= param.curnt+1; i++)
                        {
                        $("div.img_item").eq(i).animate({"left": "-="+betw_space+"px"}, "slow");
                        }
                    $("div.img_item").eq(param.curnt-2).css("visibility", "hidden");
                    param.curnt++;
                });
                $("div.img_item").eq(cur_img-2).click(function(){
                    var w_Gal = document.documentElement.clientWidth > 1020 ? document.documentElement.clientWidth : 1020;
                    var betw_space = (w_Gal/2-150)+240;
                    $("div.img_item").eq(cur_img-2).css("left", "-240px");
                    if ((param.curnt-2) != param.first) {
                        $("div.img_item").eq(param.curnt-3).css("left", (-240-betw_space)+"px");
                        $("div.img_item").eq(param.curnt-3).css("background-image", "url('"+imgarr[param.curnt-3]+"')");
                        $("div.img_item").eq(param.curnt-3).css("visibility", "visible");
                    }
                    for (var i = param.curnt-3; i <= param.curnt; i++)
                        {
                        $("div.img_item").eq(i).animate({"left": "+="+betw_space+"px"}, "slow");
                        }
                    $("div.img_item").eq(param.curnt).css("visibility", "hidden");
                    cur_img--;
                });
            });

Поначалу всё работает нормально, но как только пролистываем галерею на одно изображение вправо или влево, то обработка событий ...mouseover(function(){...}); и ...mouseout(function(){...}); остаётся привязанной к тем же двум дивам, что и в начале (для первого изображения), а вот тела этих функций работают нормально (то есть анимируется нужный элемент).
Подскажите, как вызывать обработчик, чтобы можно было динамически переназначать элементы, к которым он относится?
Уже второй день с этим мучаюсь не могу ответ найти=(


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