Предисловие
Совсем недавно разрабатывал интернет сервис каталога с подгружаемым контентом.
Задача состояла в том, что каталог должен быть с древовидной структурой, в каждой категории должны быть под категории и при клике на него, товар должен только разворачиваться и подгружаться Ajax’ом, для того что бы товар динамически подгружался дабы сократить объемы загрузки страницы. Для работы Front — End’а доступны были по ТЗ только таковы инструменты Java Script, JQuery, Ajax, JSON и конечно же HTML + CSS.
Разработка
1) Сперва, я создал дерево в HTML и придал ему стилей CSS — создать дерево самому или найти в сети не так уж проблематично.
2) Создание самого механизма.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> ... <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('<div class="articleBlocPrice">'+field.price+' руб.</div><div class="articleBlockDote"></div><div class="articleBlockName">'+field.name+'</div><div style="clear:both"></div>'); }); }); }); }); </script>
Все стало подгружаться, все заработало, можно было сказать Ура! Но…, при повторном клике подкатегории товар дублировался опять же и лпять же.
3) Доработка механизма
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> ... <script> <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('<div class="articleBlocPrice">'+field.price+' руб.</div><div class="articleBlockDote"></div><div class="articleBlockName">'+field.name+'</div><div style="clear:both"></div>'); if ( articleView.attr("data") == productCount ) { articleView.removeAttr("data") } else { articleView.attr("data", productCount); } }); }); }); }); </script>
Все заработало!
Выкладываю исходник (черновой вариант, не поправлены стили ), рабочий.
Пример
ссылка на оригинал статьи http://habrahabr.ru/post/175631/
Добавить комментарий