меню

Предисловие

Совсем недавно разрабатывал сервис интернет каталога с подгружаемым контентом. Задача состояла в том, что каталог должен быть с древовидной структурой, в каждой категории должны быть под категории и при клике на него, товар должен только разворачиваться и подгружаться 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 и jQuery

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

Зачем нам нужен TypeScript?

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

Понимание синхронного и асинхронного JavaScript с Async/Await

В этой статье вы узнаете о том, что такое синхронное и асинхронное программирование в JavaScript и как применяя эти знания, работать с Async/Await

JavaScript and JQuery 1.8.3 решение проблемы с функцией attr() на примере генератора пароля

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