jquery實現商品sku多屬性選擇(商品詳情頁)

2022-05-08 03:27:13 字數 2664 閱讀 8456

**於

>商品sku選擇demo3

title

>

head

>

<

body

>

<

style

type

="text/css"

>

ul,li

#panel

.goods_attr

.goods_attr .label

.goods_attr ul

.goods_attr li

.goods_attr li.b

.goods_attr li.b img

.goods_attr li.sel

.goods_attr li.text

.goods_attr li.img

style

>

<

div

id="panel"

>

<

div

id="panel_sku_list"

><

pre>

pre>

div>

<

div

id="panel_sel"

>

div>

div>

<

script

src=""

>

script

>

<

script

>

varkeys =;

//sku,stock keeping uint(庫存量單位)

varsku_list=[,,

,,,,

,,,,

];//顯示html結構

function

show_attr_item()

$('#panel_sel

').html(html);

}//顯示資料

function

show_data(sku_list)

$('#panel_sku_list pre

').html(str);

}show_data(sku_list);

show_attr_item();

//返回物件中的乙個陣列,有attr屬性

function

filterproduct(ids)

}//把陣列中的id所在那行的所有元素都壓入result。最後返回

if(_all_ids_in)

});return

result;

}function

filterattrs(ids));

return

result;

}//已選擇的節點陣列

function

_getselattrid());

return

list;

}//註冊點選事件$('

.goods_attr li

').click(

function

()

if($(

this

).hasclass(

'sel'))

else

varselect_ids

=_getselattrid();

////已經選擇了的規格

varids

=filterattrs(select_ids);

//如果id不在已選id所在行組成的陣列中,則然他禁止點選$('

#panel_sel

').find('li

').each(

function

(k2,li2)

else

});});

script

>

body

>

html

>

key是對應動態展示的效果,可以擴充套件屬性值。sku_list是存在的

屬性組合。

存在的是指,在這裡是有attr1,attr2,attr3,attr4(相當於顏色,尺寸,記憶體,型號)這4種規格,裡面有2x4x3x2=48種組合,而實際上售賣的組合只有9種,就是sku__list列出來的。

這2個函式是動態展示資料和結構,依據是上面圖中的2個陣列。keys和sku_list

新增商品sku

1 需求 需要寫乙個新增商品的頁面,主要難點就sku 2 思路 總體來說就是前端生成適合排版的sku資料,之後經過轉換成符合介面的上傳資料,剛開始轉換的時候沒有思路也是花了點時間,畢竟不設限制的sku可以有很多,層級也很深,所以主要用的是遞迴來處理 前端排版時的資料 對應 介面上傳時的資料 對應 3...

sku商品表設計

表關係 分類表 商品表 sku表 庫存表 分類表 屬性名 屬性值 商品表 商品和屬性關係表 屬性名 屬性值 業務邏輯 1.同一商品不同sku庫存和售價不同.2.不同型別的商品具有不同的屬性名和屬性值 如汽車和服飾 所以屬性需要支援後期新增和維護.3.在某個商品分類下通過屬性篩選商品.4.商家某件商品...

商品的SPU和SKU

spu standard product unit spu即標準商品單元,是描述某乙個商品的特性屬性集合。和商品的關係是一對一的關係,比如榮耀10手機,如圖所示 以上的引數都是榮耀10的商品特性 機身長度 寬度 厚度 等,它是乙個商品的固有屬性。sku stock keeping unit sku就...