как добавить несколько событий в свернутый список?

Question

Я работаю над модификацией бэкенда корзины для покупок.Мне нужно перечислить категории продуктов в разборном вложенном списке.Я смог сделать это с помощью кода из Йохена:

$(function() {
  $('li > ul').each(function(i) {
    var parent_li = $(this).parent('li');
    parent_li.addClass('folder');
    var sub_ul = $(this).detach();
    parent_li.find('a').click(function() {
      sub_ul.toggle();
    });
    parent_li.append(sub_ul);
  });
  $('ul ul').hide();
});

Но мне также нужно иметь возможность отображать все товары в данной категории при нажатии на эту категорию,Я хочу, чтобы событие вызывало на странице вызов mysql в этот момент, а затем перечислял продукты в div справа от свертываемого дерева.

Я самоучка, и хотя я довольно хорошо разбираюсь в php, прошло много лет с тех пор, как я делал что-то обширное в простом старом javascript, и я боюсь, что у меня над головойAjax и JQuery.Любая помощь будет принята с благодарностью.

Я пытался реализовать высоко ценимое решение, предложенное Винчем, но, несмотря на несколько дней исследований, я не смог понять, как использовать объект .data для передачикатегория до URL.

У кого-нибудь есть идеи, как передать нужные мне данные?

Заранее спасибо.

Answer 1

Я бы добавил событие клика к элементам вашей категории и отправил бы запрос AJAX, который извлечет необходимые элементы из БД и отправит его обратно на страницу, которая будет отображена. Вы можете сделать привязку по:

$(".someClass").click( function() {
    $.ajax({
        url: "url/to/your/function",
        type: "GET",
        dataType: "script"
    });
});

Но дело в том, что вам нужно передать элемент категории через URL, вы можете сделать это, добавив .data к вашему объекту через JQuery.

Как только сервер вернется с информацией, вы будете рендерить некоторые вещи, и это зависит от того, как ваша инфраструктура это делает, у вас есть разные решения, но это просто простое действие рендеринга, как .append все ваши элементы в div что вы хотите.

Вы можете добавить множество опций к вашему запросу AJAX, чтобы заставить его делать именно то, что вы хотите, пожалуйста, обратитесь к this для более подробной информации. Удачи!