меню

Предисловие

Совсем недавно разрабатывал сервис интернет каталога с подгружаемым контентом. Задача состояла в том, что каталог должен быть с древовидной структурой, в каждой категории должны быть под категории и при клике на него, товар должен только разворачиваться и подгружаться 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 and JQuery 1.8.3 решение проблемы с функцией attr() на примере генератора пароля

Совсем недавно решил написать генератор пароля с возможностью просмотра генерированного пароля под звездочками. Для работы выбрал JQuery 1.8.3 и нативный JavaScript. При написании самого скрипта столкнулся с проблемой в JQuery 1.8.3 с функцией attr().

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

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

Три способа понять промисы

Promise (обычно их так и называют «промисы») – предоставляют удобный способ организации асинхронного кода. В современном JavaScript промисы часто используются в том числе и неявно, при помощи генераторов.

Повышение уровня мастерства в JavaScript ES6

Принципы, о которых пойдет речь, являются фундаментальными для этого языка и будут оставаться таковыми независимо от того, какой фреймворк вы используете. Более того, понимание этих концепций окажется бесценным бонусом, когда вы решите изучить или использовать какую-либо популярную библиотеку или фреймворк из арсенала JavaScript.