Javascript-форум - Выполнение скрипта несколько раз на одной страницы.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Выполнение скрипта несколько раз на одной страницы. (https://javascript.ru/forum/misc/63779-vypolnenie-skripta-neskolko-raz-na-odnojj-stranicy.html)

Выполнение скрипта несколько раз на одной страницы.

Рубята помогите пожалуйста, сразу скажу что в js ни бум бум.

На сайте магазина сделал такую штуку.
В категории где отображаются товары у каждого товара есть главная картинка и снизу три дополнительных. при нажатии на дополнительную картинку она встает на место главной. но вот беда при нажатии на дополнительную картинку она встает на место главной но сразу у всех товаров. :cray: :help:

вот страничка 40amperТОЧКАruСЛЕШelektro

Что? Во что обернуть, что-бы изолировать друг от друга.

Сам скрипт.

jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a.vm-additional-images").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});
jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
jQuery(".additional-images img.product-image").click(function() {
jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
jQuery(this).parent().children("a.product-image").removeAttr("rel");
var src = jQuery(this).parent().children("a.product-image").attr("href");
jQuery(".main-image img").attr("src",src);
jQuery(".main-image img").attr("alt",this.alt );
jQuery(".main-image a").attr("href",src );
jQuery(".main-image a").attr("title",this.alt );
jQuery(".main-image .vm-img-desc").html(this.alt);
});

}

Поможите пжлста!
Спасибо!

Цитата:

Сообщение от Rasy

del

Чтож так строго-то!?

Задам вопрос по другому. (ну попробую хоть).
Еще раз я в этом блудном деле дурачек :)

Скрипт еще раз:

jQuery(document).ready(function() {
Virtuemart.updateImageEventListeners()
});
Virtuemart.updateImageEventListeners = function() {
jQuery("a.vm-additional-images").fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic"
});
jQuery(".additional-images a.product-image.image-0").removeAttr("rel");
jQuery(".additional-images img.product-image").click(function() {
jQuery(".additional-images a.product-image").attr("rel","vm-additional-images" );
jQuery(this).parent().children("a.product-image").removeAttr("rel");
var src = jQuery(this).parent().children("a.product-image").attr("href");
jQuery(".main-image img").attr("src",src);
jQuery(".main-image img").attr("alt",this.alt );
jQuery(".main-image a").attr("href",src );
jQuery(".main-image a").attr("title",this.alt );
jQuery(".main-image .vm-img-desc").html(this.alt);
});

}

Понятно что работает по классам вот в этом и причина что у главной картинки всех товаров класс один и тот-же.
Могу сделать так сделать класc image-id[товара] но это будет html созданный средствами php, а как из php сообщить скрипту этот новый класс. Типа должно получиться разные экземпляры?!

Если честно эта задача уже была решина без всяких id, что-то где-то нагуглил. Но чисто форсмажорно был поднят сайт из последнего копии при переноси сервера и усе!

Буду благодарен любой помощи.

Спасибо!

Цитата:

Сообщение от pavelrer

Чтож так строго-то!?

Пост никакого отношения не имеет к вам лично. Я решил сразу в этом мессиве разобраться, а потом лень стало, хоть и логика тут простая.

Еще раз - Рубята помогите пожалуйста, сразу скажу что в js ни бум бум.
Ну ежли у кого карма то периваливает за разум, зачем писать ответы?
Лучше тогда по бабам!, че писать то не о чем!?

Цитата:

Сообщение от pavelrer

Еще раз - Рубята помогите пожалуйста, сразу скажу что в js ни бум бум.

Будет html разметка, то помогу, а потом обязательно по бабам отмечу:)

Дык вот она
вот страничка 40amperТОЧКАruСЛЕШelektro
А про баб! Толстую мне оставь :lol:

Блин! Ну может мой вопрос тупой!? Тут столько спецов и ноль ответа!? Или нет спецов? Что-то гонору у всех много! А толку нет! Ответ будет?
на оскорбление сильно не обижаюсь, но в неуправляемый ddos - javascript.ru с удовольствием поставлю если не прекратите данными делиться с кем не поподя!

Это не я сам в шоке! Админы, Посетители и Rasy!
Нет это Я - Извените все выпел! Узнаю свой почерк! Прошу прощения, выпил! Прошу понять! (и простить :) .
Еще раз Извините, черт попутал! Стыдно!

pavelrer,
Чтобы найти нужный вам конкретный объект, надо от текущего this добраться до их общего родителя
(img.product-image->div.floatleft->div.additional-image->div.spacer blc_good - третий родитель)
и внутри родителя найти нужный элемент, т.е что-то вроде

jQuery(this).parent().parent().parent().find(".main-image img").attr("src",src);

pavelrer,
Небольшая иллюстрация

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".additional-images img.product-image").click(function () {
                var src = $(this).attr("src");
                //  $(".main-image img").attr("src", src);
                $(this).parent().parent().parent().find(".main-image img").attr("src", src);
            });
        });
    </script>
</head>
<body>
    <div class="spacer" style="position: absolute; width: 300px; height: 400px; border: 1px solid black">
        <div class="vm-product-media-conteiner" style="position: relative; width: 300px;
            height: 300px;">
            <div class="main-image">
                <img src="http://javascript.ru/cat/list/dom.gif" style="position: relative; width: 100%; height: 100%" />
            </div>
        </div>
        <div class="additional-images" style="position: relative; width: 300px; height: 100px">
            <div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 0%;
                top: 0%; border: 1px solid black">
                <img class="product-image" src="http://javascript.ru/cat/list/dom.gif" style="position: relative; width: 100px;
                    height: 100px" />
            </div>
            <div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 33.3%;
                top: 0%; border: 1px solid black">
                <img class="product-image" src="http://javascript.ru/cat/list/event.gif" style="position: relative; width: 100px;
                    height: 100px;" />
            </div>
            <div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 66.6%;
                top: 0%; border: 1px solid black">
                <img class="product-image" src="http://javascript.ru/cat/list/integr.jpg" style="position: relative; width: 100px;
                    height: 100px;" />
            </div>
        </div>
    </div>
    <div class="spacer" style="position: absolute; width: 300px; height: 400px; left:315px; border: 1px solid black">
        <div class="vm-product-media-conteiner" style="position: relative; width: 300px;
            height: 300px;">
            <div class="main-image">
                <img src="http://javascript.ru/cat/list/donkey.gif" style="position: relative; width: 100%; height: 100%" />
            </div>
        </div>
        <div class="additional-images" style="position: relative; width: 300px; height: 100px">
            <div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 0%;
                top: 0%; border: 1px solid black">
                <img class="product-image" src="http://javascript.ru/cat/list/donkey.gif" style="position: relative; width: 100px;
                    height: 100px" />
            </div>
            <div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 33.3%;
                top: 0%; border: 1px solid black">
                <img class="product-image" src="http://javascript.ru/cat/list/libs.jpg" style="position: relative; width: 100px;
                    height: 100px;" />
            </div>
            <div class="floatleft" style="position: absolute; width: 100px; height: 100px; left: 66.6%;
                top: 0%; border: 1px solid black">
                <img class="product-image" src="http://javascript.ru/cat/list/mobile.jpg" style="position: relative; width: 100px;
                    height: 100px;" />
            </div>
        </div>
    </div>
</body>
</html>