今天寫分類頁面中排序和價(jià)格頁面
排序價(jià)格頁面
這個(gè)頁面還算簡單盗尸，上面的是圖片柑船，下面排序和價(jià)格是用兩張table做的，沒什么太大的難度泼各。設(shè)置的table沒有表框鞍时，是在每個(gè)td上加上一個(gè)邊框。再把輸入框的邊框用 border-width; 0px,邊框設(shè)置為無扣蜻，就是想在這樣了逆巍。
5.31日更新產(chǎn)品列表
產(chǎn)品列表
我記得原來好像寫過類似的列表吧，都大同小異莽使。不過這個(gè)當(dāng)鼠標(biāo)放在列表上時(shí)會(huì)有四個(gè)像素的紅色邊框出現(xiàn)锐极。實(shí)現(xiàn)它就是套兩個(gè)div ，如果套一個(gè)的話芳肌，會(huì)因?yàn)橄袼夭粔蛄樵佟Ｍ锩鏀D，造成抖動(dòng)庇勃。
6.1日 0:27更新分類頁面交互
分類頁面交互
吧這兩個(gè)頁面結(jié)合在一起了檬嘀，并且在輸入框輸入價(jià)格區(qū)間就可找到對應(yīng)的商品。
先獲取輸入框的值责嚷，如果不是數(shù)字或小于0就改成一鸳兽，并輸出到輸入框。再分別獲取開始輸入框和結(jié)束輸入框的值罕拂，并判斷他們同時(shí)為數(shù)字揍异。把商品div隱藏，在用each()函數(shù)遍歷所有商品爆班。
再用attr()函數(shù)獲取每個(gè)元素的price屬性衷掷，這個(gè)屬性為價(jià)格，和所在商品價(jià)格一樣柿菩。把獲取到的price屬性轉(zhuǎn)換為Number對象戚嗅，new Number().沒設(shè)這個(gè)時(shí)，當(dāng)我在結(jié)束輸入框輸入1000時(shí)枢舶，沒有數(shù)據(jù)懦胞。設(shè)置就沒事了，不清楚這是怎么回事凉泄。然后把轉(zhuǎn)換后的price和價(jià)格區(qū)間比較躏尉，滿足條件的就顯示。下圖是查找符合條件的商品后众。
查找
下面是jquery代碼胀糜。
<script>
$(function(){
$("input.press").keyup(function(){
var num = $(this).val();
if (num.length == 0)
{
$("div.div3").show();
return;
}
num = parseInt(num);
if (isNaN(num))
num = 1;
if (num <= 0)
num = 1;
$(this).val(num);
var begin = $("input.beginpre").val();
var end = $("input.endpre").val();
if (!isNaN(begin) && !isNaN(end)){
$("div.div3").hide();
$("div.div3").each(function(){
var price = $(this).attr("price");
price = new Number(price);
if (price <= end && price >= begin)
$(this).show();
});
}
});
});
</script>
