Предисловие

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

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

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

Пример

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

• 2.88
• 1
• 2
• 3
• 4
• 5

Голосов: 1416 | Просмотров: 2665