меню

Предисловие

Совсем недавно разрабатывал сервис интернет каталога с подгружаемым контентом. Задача состояла в том, что каталог должен быть с древовидной структурой, в каждой категории должны быть под категории и при клике на него, товар должен только разворачиваться и подгружаться Ajax'ом, для того что бы товар динамически подгружался дабы сократить объемы загрузки страницы. Для работы Front - End'а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.

Разработка

1) Сперва, я собрал дерево в HTML и CSS - создать дерево самому или найти в сети не так уж проблематично.

2) Создание самого механизма на JQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> ...


<script>
    $(document).ready(function() {
        $('.article').click(function(){
            var articleView = $(this).parent('.Node').find('.article');
            var viewArticle = $(this).parent('.Node').find('.articleBlock');
            var url = $(this).attr('data');
            $.getJSON(url, function(data){
                $.each(data, function(i, field){
                    var productCount = viewArticle.append('+field.price+' руб.'+field.name+'); 
                }); 
            }); 
         }); 
     }); 
</script> 

Все стало подгружаться, все заработало, можно было сказать Ура! Но..., при повторном клике подкатегории товар дублировался опять и oпять.

3) Доработка механизма


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
...

<script>
    $(document).ready(function() {
        $('.article').click(function(){
            var articleView = $(this).parent('.Node').find('.article');
            var viewArticle = $(this).parent('.Node').find('.articleBlock');
            var url = $(this).attr('data');
            $.getJSON(url, function(data){
                $.each(data, function(i, field){
                    var productCount = viewArticle.append('+field.price+' руб.'+field.name+''); 
                    if ( articleView.attr("data") == productCount ) { articleView.removeAttr("data") } 
                    else { articleView.attr("data", productCount); } 
                 }); 
            });
         }); 
    }); 
</script> 

Все заработало!

Выкладываю исходник (черновой вариант, не поправлены стили ), рабочий.

Пример

Решение сырое, но рабочее, доработать будет не сложно.

Помощь сайту
ЮMoney:
4100 1180 7209 833
Карта Сбербанк:
2202 2080 6183 7127

Возможно, вам будет интересно

Javascript array шпаргалка

Переменные в Javascript позволяют хранить только одни данные за раз. Однако, учитывая, что часто бывает полезно манипулировать большим количеством данных, концепции переменной иногда недостаточно, потому что становится трудно управлять большим количеством различных переменных.

Youtube несколько видео на странице и стоп проигрывания предыдущего видео.

Youtube несколько видео на странице. Как сделать остановку предыдущего видео, при запуске следующего? На сайте расположено на одной странице три видео. При включении нужно чтобы другое видео, если запущено , останавливалось. Как это реализовать?

Область видимости в JavaScript

Область видимости переменной — это часть контекста выполнения, в котором эта переменная существует. Область видимости определяет, есть ли у вас доступ к переменной в данном контексте выполнения.

Восемь типов данных и typeof

В JavaScript существует несколько основных типов данных. В этой статье мы получим о них общее представление, а позже, в соответствующих главах подробно познакомимся с использованием каждого типа в отдельности.