Оптимизация и доработка выпадающего меню с загрузкой, посредством Ajax, контента

@AlexBBB · Регистрация: 16.03.2015

Author24 — интернет-сервис помощи студентам

Всем добра.

Делаю меню для сайта, вот сам код.

HTML5

<ul class="sub-catalog">
    <li>
        <a class="category-item" title="Игровые мыши" data-idcategory="1" href="?view=mouses">Игровые мыши</a>
        <ul class="more-item" style="height: 375px;"></ul>
    </li>
    <li> // и т.д. по аналогии. Количество ссылок изменяемое
    <li>
    <li>
    <li>
    <li>
    <li>
    <li>
</ul>

При наведение на ссылку .category-item из БД посредством AJAX подгружаются данные(Бренды, соответствующих товаров). и добавляются в открывшийся ul.more-item в виде - списка ссылок

Есть некоторые проблемы.
Во-первых, хотел бы услышать предложения по оптимизации кода, так как сам недавно в js и jQuery и возможно что-то сделал не правильно.
Во-вторых, в первой части hover все ок, данные загружаются как надо, добавляются ссылки на бренды. Но при потере фокуса возникают трудности.
При наведении необходимо показать весь полученный из БД контент.

Если курсор не перешел на ul.more-item, а был убран вне меню, удалить данные.
Если курсор перешел на соседний элемент, удалить старые данные и показать новые.
Если курсор перешел на ul.more-item данные сохраняются, ничего не удаляются.
Если курсор ушел с ul.more-item вне меню, удалить данные.
Если курсор с ul.more-item перешел на родительскую ссылку, сохранить данные.
Если курсор перешел на соседнюю ссылку, удалить старые и загрузить новые.
фуууухххх... надеюсь нечего не упустил.
В данные момент код функционирует, но есть моменты которые не нравятся (пояснения в коде).

вот сам велосипед:

Javascript

$(document).ready(function(){
  $('.sub-catalog > li > a').each(function(){
    $(this).hover(
      function(){
         if($('.brands-menu').length > 0){
            $(".more-item").empty();
 /* приходится каждый раз проверять на наличие
 переданного контента и удалять если есть. */
              }
 
              var dataId = $(this).attr("data-idcategory"),
                  ulMoreItem = $(this).siblings(".more-item");
 
              if(!parseInt(dataId)){
                  return false;
              }else if(/[^[0-9]+/.test(dataId)){
                  return false;
              }
 
              $.ajax({
                 type:'POST',
                 url: 'ajax/catalog/mouses.php',
                 datatype: 'JSON',
                 data: "param=" + dataId,
                 
                 success:function(data){
                   data = JSON.parse(data);
 
                   var i = 0,
                         max = data.length,
                         img = '';
 
                   for(; i < max; i++ ){
                      $(ulMoreItem).prepend("<li><a class='brands-menu' href='?view=" + data[i].brand_src + "' data-img='" + data[i].brand_img + "' title='" + data[i].brand_name + "'></a></li>");
                       var a_brandsMenu = $('.brands-menu');
                       img = $(a_brandsMenu).attr('data-img');
                       $(a_brandsMenu).css({"background" : "url(http://x-bob/userfiles/product_img/baseimg/brands/"+ img +")"});
                        }
                    }
                });
            },
            function(){
                var ulMoreItem = $(this).siblings(".more-item");
 
                $(ulMoreItem).hover(
                    function(){
                          // тут пустая функция... хз что с ней делать 
                    },
                    function(){
                        $(ulMoreItem).empty();
                    }
                );
 
                /* удалять при потере ссылкой фокуса не получается, 
так как удаляется контент при наведении на ul.more-item */
 
            }
        );
    });
});

вот собственно, как-то так. Надеюсь на вас комрады)))

Добавлено через 12 часов 10 минут
Обнаружилась еще одна проблема, при добавлении background-изображения для всех пунктов, добавляется первое попавшее в переменную img.

@alex44 · 18.02.2016, 11:37

Было бы не плохо сделать немного иначе. При первом наведении загружать контент, но потом не удалять его, а просто прятать (hide(), css('display', 'none'), visibility). А при повторном наведении просто снова отображать его уже без загрузки. По поводу пункта о проблемах : нужно взять пункт меню и весь контент грузить в этот же контейнер (вы так и делаете), а потом реагировать уже на мышь как на одном родительском контейнере. Вот это вам нужно. Тогда просто фокус теряться не будет. Можно конечно сделать и иначе, но этот вариант попроще будет. Т.е. вы как бы упаковываете элементы а на событие реагируете по родителю. Надеюсь правильно понял ваши затруднения. Еще в jquery не нужно делать функцию each. Просто берете событие по набору селекторов а внутри этой функции

Javascript

1
2
3

$('.sub-catalog > li > a').each(function(){
    $(this).hover(
      function(){

нужно записать

Javascript

1	$('.sub-catalog > li > a').hover(function(){...}, function(){...});

И внутри этих функций $(this) будет указывать на тот элемент на котором событие сработало.

@AlexBBB · 18.02.2016, 11:50 **[ТС]**

alex44, по поводу each, спасибо не знал.)))

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

а потом реагировать уже на мышь как на одном родительском контейнере. Вот это вам нужно. Тогда просто фокус теряться не будет. Т.е. вы как бы упаковываете элементы а на событие реагируете по родителю.

Если не сложно, можно более подробно об этом, а то что-то туплю) Спасибо

@alex44 · 18.02.2016, 12:00

Еще одно уточнение : вам нужно реагировать не на

Javascript

1	$('.sub-catalog > li > a')

а на

Javascript

1	$('.sub-catalog > li')

@AlexBBB · 18.02.2016, 12:17 **[ТС]**

alex44, понял, это переделаю, а по поводу реагировать на мышь как на одном родительском контейнере, не очень я понял вас, не могли бы вы объяснить?)

@alex44 · 19.02.2016, 09:15

Я имел ввиду, что если ты работаешь с двумя отдельными контейнерами (например Div), то их нужно связывать, чтобы hover не пропал. А если с одним родительским li то все уже упаковано в него и все, что тебе нужно сделать это hover(...) с двумя функциями по нему и все.

Javascript

$('sub-catalog li').hover(function(){...проверяешь загружено ли описание, пустой ли див, если пустой то загружаешь. Если нет, то просто показываешь..}, function(){...прячешь контент....})

Вот и все, что нужно сделать.

@AlexBBB · 19.02.2016, 09:49 **[ТС]**

alex44, вот ведь... я понял....

Оказывается такое просто решение. Будет мне наука. Спасибо.)))

Вопрос на засыпку, а как можно связать два контейнера, чтобы тот же самый hover() не пропадал?

@alex44 · 21.02.2016, 09:25

Например так :

HTML5

1	<div class="parent"><div class="first_child"></div><div class="second_child"></div></div>

а в js делаешь вот так :

Javascript

1	$('.parent').hover или $('parent').mouseenter, $('parent').mouseleave

и когда подгрузишь новое содержимое в second_child то контейнер parent просто расшириться и все. В твоем случае parent - это

Javascript

1	$('.sub-catalog li')

, first_child - это ссылка a, а second_child - это more-item.

Добавлено через 11 минут

Javascript

$('.sub-catalog li').bind('mouseenter', function(event){
var more_item = $(this).find('.more-item');
(more_item.innerHTML!="") ? more_item.show() : 
  $.ajax({
                 type:'POST',
                 url: 'ajax/catalog/mouses.php',
                 datatype: 'JSON',
                 data: "param=" + dataId,
                 
                 success:function(data){
                   data = JSON.parse(data);
 
                   var i = 0,
                         max = data.length,
                         img = '';
 
                   for(; i < max; i++ ){
                      $(ulMoreItem).prepend("<li><a class='brands-menu' href='?view=" + data[i].brand_src + "' data-img='" + data[i].brand_img + "' title='" + data[i].brand_name + "'></a></li>");
                       var a_brandsMenu = $('.brands-menu');
                       img = $(a_brandsMenu).attr('data-img');
                       $(a_brandsMenu).css({"background" : "url(http://x-bob/userfiles/product_img/baseimg/brands/"+ img +")"});
                        }
                    }
                });
});
$('.sub-catalog li').bind('mouseleave', function(event){
var more_item = $(this).find('.more-item');
   more_item.hide();
});

Не проверял, поэтому могут быть ошибки. Это просто, чтобы общую идею понял.

@AlexBBB · 21.02.2016, 17:00 **[ТС]**

alex44, в принципе, все понятно, практически одно и тоже получается, за исключением некоторых моментов)
И вопрос на засыпку. Для чего вы передавали event в function

Javascript

1	function(event)

если оно никак не используется как event.preventDafault?

@alex44 · 23.02.2016, 18:08

event - это так. Получается твою проблему не решили? Наверное я неправильно вопросы понял?...

@AlexBBB · 24.02.2016, 11:24 **[ТС]**

alex44, Нет, все ок) Все проблемы, по крайней мере здесь, были решены. Благодаря тебе, даже несколькими путями)

Новые блоги и статьи
Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .	Полезные поделки на Arduino, которые можно сделать самому raxper 06.01.2025 Arduino как платформа для творчества Arduino представляет собой удивительную платформу для технического творчества, которая открывает безграничные возможности для создания уникальных проектов. Эта. . .	Подборка решений задач на Python IT_Exp 06.01.2025 Целью данной подборки является предоставление возможности ознакомиться с различными задачами и их решениями на Python, что может быть полезно как для начинающих, так и для опытных программистов. . . .
С чего начать программировать микроконтроллеры raxper 06.01.2025 Введение в мир микроконтроллеров Микроконтроллеры стали неотъемлемой частью современного мира, окружая нас повсюду: от простых бытовых приборов до сложных промышленных систем. Эти маленькие. . .	Из чего собрать игровой компьютер inter-admin 06.01.2025 Сборка игрового компьютера требует особого внимания к выбору комплектующих и их совместимости. Правильно собранный игровой ПК не только обеспечивает комфортный геймплей в современных играх, но и. . .	Обновление сайта www.historian.by Reglage 05.01.2025 Обещал подвести итоги 2024 года для сайта. Однако начну с того, что изменилось за неделю. Добавил краткий урок по последовательности действий при анализе вредоносных файлов и значительно улучшил урок. . .	Как использовать GraphQL в C# с HotChocolate Programming 05.01.2025 GraphQL — это современный подход к разработке API, который позволяет клиентам запрашивать только те данные, которые им необходимы. Это делает взаимодействие с API более гибким и эффективным по. . .	Модель полного двоичного сумматора с помощью логических операций (python) AlexSky-coder 04.01.2025 def binSum(x:list, y:list): s=^y] p=x and y for i in range(1,len(x)): s. append((x^y)^p) p=(x and y)or(p and (x or y)) return s x=list() y=list()	Это мы не проходили, это нам не задавали...(асихронный счётчик с управляющим сигналом зад Hrethgir 04.01.2025 Асинхронный счётчик на сумматорах (шестиразрядный по числу диодов на плате, но наверное разрядов будет больше - восемь или шестнадцать, а диоды на старшие), так как триггеры прошли тестирование и. . .

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	18.02.2016, 11:50 [ТС]	3
	alex44, по поводу each, спасибо не знал.))) Сообщение от alex44 а потом реагировать уже на мышь как на одном родительском контейнере. Вот это вам нужно. Тогда просто фокус теряться не будет. Т.е. вы как бы упаковываете элементы а на событие реагируете по родителю. Если не сложно, можно более подробно об этом, а то что-то туплю) Спасибо 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	18.02.2016, 12:17 [ТС]	5
	alex44, понял, это переделаю, а по поводу реагировать на мышь как на одном родительском контейнере, не очень я понял вас, не могли бы вы объяснить?) 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	19.02.2016, 09:49 [ТС]	7
	alex44, вот ведь... я понял.... Оказывается такое просто решение. Будет мне наука. Спасибо.))) Вопрос на засыпку, а как можно связать два контейнера, чтобы тот же самый hover() не пропадал? 0

@alex44 4 / 4 / 1 Регистрация: 21.10.2015 Сообщений: 24
	23.02.2016, 18:08	10
	event - это так. Получается твою проблему не решили? Наверное я неправильно вопросы понял?... 0

@AlexBBB 22 / 22 / 9 Регистрация: 16.03.2015 Сообщений: 193
	24.02.2016, 11:24 [ТС]	11
	alex44, Нет, все ок) Все проблемы, по крайней мере здесь, были решены. Благодаря тебе, даже несколькими путями) 0

Оптимизация и доработка выпадающего меню с загрузкой, посредством Ajax, контента

Решение