Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.10.2016, 10:54
Интересующийся
Отправить личное сообщение для MouseOver Посмотреть профиль Найти все сообщения от MouseOver
 
Регистрация: 11.11.2013
Сообщений: 25

Как правильно искать элементы в DOM и записывать результаты в массив?
Есть страница с изображениями, каждое из которых можно открыть в модальном окне bootstrap, Данные для заполнения окна беру через html. Кликаю по картинке, забираю ссылку на изображение, описание и вывожу в модальном.
Так же в модальном хочу вывести слайдер с похожими изображениями, сортировать их по значению data-value например. Вот что получилось:
$('.mwrap').on('click', function() { //кликаем на блок с картинкой
            var img = $('img', this).attr('src'); //забираем данные
            var desc = $('p', this).html();
            var value = $('img', this).attr('data-value');
            var arr = $('img[data-value="'+value+'"]').map(function() { return this.src; }).get(); //здесь со всей страницы формируем массив с ссылками на похожие изображения отсортированные по data-value
            var elements = $();
            for(x = 0; x < arr.length; x++) { 
            elements = elements.add('<div><img src="'+arr[x]+'"></div>'); //создаем html для слайдера
            }
            $('#myModal').on('show.bs.modal', function() { //вызываем модалку
                $(".wimg").attr("src", img); //добавляем данные в html модального окна
                $(".wdesc").html(desc);
                $('.wslider').append(elements);  //добавляем html для слайдера
            });
        });

Данный код работает только для первого вызова модального окна, если не перезагружая страницу вызывать следующие окна, то массив arr дублируется и слайдер рушится. Как правильно сделать выборку src нужных изображений и выводить в модальном окне в качестве слайдера? Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 25.10.2016, 11:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,294

MouseOver,
лучше бы макет полностью, а так var для х, и что значит дублируется может $('.wslider').append(elements); заменить на html?
Ответить с цитированием
  #3 (permalink)  
Старый 25.10.2016, 11:24
Интересующийся
Отправить личное сообщение для MouseOver Посмотреть профиль Найти все сообщения от MouseOver
 
Регистрация: 11.11.2013
Сообщений: 25

Сообщение от рони Посмотреть сообщение
MouseOver,
лучше бы макет полностью, а так var для х, и что значит дублируется может $('.wslider').append(elements); заменить на html?
http://bogdan.tw1.ru/works вот ссыль
Посмотрите, вывожу массив в консоль.
Ответить с цитированием
  #4 (permalink)  
Старый 25.10.2016, 11:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,294

MouseOver,
возможный вариант ...
jQuery(function() {
    var img, desc, elements;
    jQuery(".mwrap").on("click", function() {
        img = jQuery("img", this).attr("src");
        desc = jQuery("p", this).html();
        var value = jQuery("img", this).data("value");
        jQuery(".wslider").html("");
        elements = jQuery.map(jQuery('img[data-value="' + value + '"]'), function(img) {
            return jQuery("<div/>" , {html : $(img).clone()})
        })
    });
    jQuery("#myModal").on("show.bs.modal", function() {
        jQuery(".wimg").attr("src", img);
        jQuery(".wdesc").html(desc);
        jQuery(".wslider").html(elements)
    })
});

Последний раз редактировалось рони, 25.10.2016 в 11:41.
Ответить с цитированием
  #5 (permalink)  
Старый 25.10.2016, 11:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,294

MouseOver,
немного поправил смотрите снова.

up

Последний раз редактировалось рони, 25.10.2016 в 11:42.
Ответить с цитированием
  #6 (permalink)  
Старый 25.10.2016, 11:58
Интересующийся
Отправить личное сообщение для MouseOver Посмотреть профиль Найти все сообщения от MouseOver
 
Регистрация: 11.11.2013
Сообщений: 25

рони,
Поставил код на страницу, вроде ок все, только слайдер запускается только один раз, далее просто изображения выводятся. Подскажите как запускать его для каждого окна? Спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 25.10.2016, 12:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,294

MouseOver,
читать доку на slick про slickAdd и slickRemove и циклом вместо map
пока грубо разрушение при закрытии модального окна
jQuery(".mwrap").on("click", function() {
         var img, desc, elements;
        img = jQuery("img", this).attr("src");
        desc = jQuery("p", this).html();
        var value = jQuery("img", this).data("value");

        elements = jQuery.map(jQuery('img[data-value="' + value + '"]'), function(img) {
            return jQuery("<div/>" , {html : $(img).clone()})
        })
        jQuery(".wimg").attr("src", img);
        jQuery(".wdesc").html(desc);
        jQuery(".wslider").html(elements)
        $(".wslider").slick({
                  dots: true,
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  autoplay: true
              });



    });
    jQuery("#myModal").on("hide.bs.modal", function() {
        jQuery(".wslider").slick('destroy').html("");
    })
Ответить с цитированием
  #8 (permalink)  
Старый 25.10.2016, 12:23
Интересующийся
Отправить личное сообщение для MouseOver Посмотреть профиль Найти все сообщения от MouseOver
 
Регистрация: 11.11.2013
Сообщений: 25

рони,
Большущее спасибо , жалко не могу плюсануть http://prntscr.com/cynjad
Вы кстати каким слайдером пользуетесь?)
Ответить с цитированием
  #9 (permalink)  
Старый 25.10.2016, 12:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,294

MouseOver, любым
проще написать свой
Автоматизация слайдера
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кто знает как правильно отобрать элементы!!! Nigga2102 Events/DOM/Window 3 12.05.2011 18:08
Как добавить элемент в XML через DOM используя PHP? bayah Серверные языки и технологии 6 11.08.2010 12:33
Как создать многомерный массив FRIE Общие вопросы Javascript 29 02.06.2010 18:14
Как правильно прописать свой код в .js Всеми_Любимый Элементы интерфейса 6 23.02.2010 20:34
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 22:20