jQuery是一個優秀的JavaScript庫,它簡化了HTML文檔遍歷、事件處理、動畫效果等操作。本文將介紹如何使用jQuery選中之后查找子分類。
我們假設頁面中有一個分類列表和一個商品列表,當用戶點擊分類列表中的一個分類時,需要根據該分類查找到它的所有子分類和對應的商品。
// 選中分類列表中的一個分類 $('ul.category li').click(function () { // 獲取當前選中的分類id var categoryId = $(this).attr('data-category-id'); // 根據分類id查找所有子分類和對應的商品 var $subCategories = $('ul.category li[data-parent-id=' + categoryId + ']'); var $products = $('ul.product li[data-category-id=' + categoryId + ']'); // 顯示所有子分類和對應的商品 $subCategories.show(); $products.show(); });
上述代碼中,我們使用了jQuery的選擇器和屬性選擇器來選中分類列表和商品列表中符合條件的元素。其中,$('ul.category li')
選中所有分類列表中的li元素,$(this).attr('data-category-id')
獲取當前選中的分類id,$('ul.category li[data-parent-id=' + categoryId + ']')
選中所有父分類id等于當前分類id的子分類,$('ul.product li[data-category-id=' + categoryId + ']')
選中所有商品列表中分類id等于當前分類id的商品。
最后,我們將所有子分類和對應的商品顯示出來,供用戶選擇。這樣,我們就實現了根據分類選中之后查找子分類和對應商品的功能。
上一篇css底部欄清除樣式
下一篇css幻燈片制作