Получение JSON с помощью jQuery и создание списков с события click призвание в jQuery и JSON


У меня есть два элемента на мою страницу:

<ul id="VerticalMenu></ul>
<ul id="AccordionMenu"></ul>

Я звоню некоторые JSON с помощью jQuery и загрузка элементов в див- ов. Я интересно, если есть вещи, которые я могу делать более эффективно, и более эффективные способы использовать селекторы и JSON.

$().ready(function() {
    //Load sections
    GetCarlineSections(_BucketID);
});

function GetCarlineSections(bucketID) {
    //Get section json list
    $.ajax(
    { 
        type: "POST",
        url: _ApplicationRootURL + 'GetChildBucketList', //Call the ActionResult to return the JSON object
        data: 'parentID=' + bucketID,
        success: function (sections) { //'sections' is an array of JSON objects returned by GetChildBucketList
            $(sections).each(function () {
                $('#VerticalMenu') //Append each item to the #VerticalMenu <ul>
                    .append(
                        $('<li/>') //Append a new <li> element to <ul> #VerticalMenu
                        .addClass('Section')
                        .html(
                            $('<h4/>') //Create a new <h4> inside of the <li>
                            .addClass(this.BucketName)
                            .html(this.BucketName)
                            .click({ parentID: this.BucketID }, function (event) { //Attach a click event to the <h4> element
                                $('#AccordionMenu').empty();
                                GetSectionSubSections(event.data.parentID); //Event.data.parentID is the id of the bucket represented by this <h4> element
                            })
                        )
                    );
            });
        }
    });
}

function GetSectionSubSections(bucketID) {
    $.ajax(
    { 
        type: "POST",
        url: _ApplicationRootURL + 'GetChildBucketList',
        data: 'parentID=' + bucketID,
        success: function (SubSections) { //SubSections are the children buckets of Section, local var bucketID
            $(SubSections).each(function () {
                $('#AccordionMenu')
                    .append(
                        $('<li/>')
                        .addClass('SubSection')
                        .html(
                            $('<h4/>')
                            .addClass(this.SEOURLName)
                            .html(this.BucketName)
                            .click({ parentID: this.BucketID }, function (event) { //Eventdata parentID passes the SubSectionID to the event object
                                GetSubSectionHeadlines(this, event.data.parentID)
                            })
                        )
                    );
            });
        }
    });
}

function GetSubSectionHeadlines(parentElement, SubSectionID) {
    //Get the Headlines based on the parent SubSection
    $(parentElement).after($('<ul/>').addClass(parentElement.className));
    $.ajax({
        type: 'POST',
        url: _ApplicationRootURL + 'GetChildBucketList',
        data: 'parentID=' + SubSectionID,
        success: function (Headlines) {
            $(Headlines).each(function () {
                $('ul.' + parentElement.className).prepend(
                    $('<li/>')
                        .html(this.BucketName)
                )
            })
        }
    });
}


8753
5
задан 21 апреля 2011 в 05:04 Источник Поделиться
Комментарии
1 ответ

Два небольших nickpicks на старте:


  • Пустыми HTML списки (ул, пр) строго говорят недействительным. Они должны содержать хотя бы один элемент списка. Тем не менее, я считаю, не существует никаких ограничений браузера или по другим техническим причинам пустой список не должен работать.

  • Как правило, имена функций, переменных и полей объекта в JavaScript должны быть записаны с маленькой буквы в начале.

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

$('#VerticalMenu') 
.append(
$(sections).map(function () {
$('<li/>')
// ...
})
);

Кстати, с разделами-это массив простых JavaScript-объекты, а не дом-объекты, это немного странно, чтобы обернуть их в объект jQuery ($(разделы).каждый(...)), потому что jQuery разворачивает их сразу в любом случае. Вы должны использовать $.каждый(секции, ... ) (или $.карта(разделы, ... )) вместо этого.

Вы передаете все ваши списки в одном классе (раздел и подраздел , соответственно). Если вы удалите позже класс, это обычно признак плохого дизайна в CSS. Если вы выходите из класса, то вместо селектора .Раздел { ... } вы можете использовать селектор потомка: #VerticalMenu ли { ... }.

Одна последняя вещь: использование Н4 элементов кажется мне неправильным. Либо это меню, то вы не должны быть с помощью заголовка элементы, либо элементы в AccordionMenu являются subheadlines и используя Н5 вместо.

3
ответ дан 22 апреля 2011 в 08:04 Источник Поделиться