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

@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.

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

Следующий ответ