HTML多條件篩選商品

時間 2019-12-13

標籤 html 條件篩選商品欄目 HTML 简体版

原文原文鏈接

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" href="${contextPath}/static/1010jz/test.css" />

<script src="${contextPath}/static/assets/js/jquery.js"></script>
</head>
 
<body>
<div class="select-box">
    <ul class="color">
        <li>顏色</li>
        <li data-attr="all" class="on">全部顏色</li>
        <li data-attr="red" >紅色</li>
        <li data-attr="yellow" >黃色</li>
        <li data-attr="green" >綠色</li>
    </ul>
    
        <ul class="price">
        <li>price</li>
        <li data-attr="all" class="on">全部價格</li>
        <li data-attr="100" >100</li>
        <li data-attr="200" >200</li>
        <li data-attr="300" >300</li>
    </ul>
    
    
</div>

 <script src="${contextPath}/static/1010jz/select.js"></script> 
</body>
</html>

 window.onload = function(){
    changeStatus(window.location.href)
}

//選擇條件切換
$(".select-box li").click(function(){
    $(this).addClass('on').siblings().removeClass("on");
    alert(getSelect());
    //window.location.href=getSelect();
});

function getSelect(){
    var url = window.location.href;
    var arr = [];
    var select = [];
    arr = url.split("?");
    url = arr[0]
    
    $(".select-box ul").each(function(){
        var p =$(this);
        var _where = [],name,attr;
        
        _where['name'] = $(this).attr("class");
        p.find("li").each(function(){
            if ($(this).hasClass("on")){
                _where['attr'] = $(this).attr("data-attr");
                
            }
            
        });
        select.push(_where)
    });

    if(select.length > 1){
        
        var url1 = '';
        for(var i = 0; i <select.length; i ++){
            url1+=select[i]['name'] + "=" + select[i]['attr'] + "&";
        }
        
        url = url +"?" +url1;
        return url.substr(0,url.length -1);
    }
}

function changeStatus(url){
    var params = url.split("?")[1];
    if(params){
        _arr = params.split("&");
    } else {
        return false;
    }
    
    //對應URL參數獲選已選擇 手槍的，添加ON樣式
    for(var i =0; i <_arr.length; i ++){
        var name,attr;
        var _name = $(".select-box > ul").eq(i).attr("class");
        var div_attr = $(".select-box > ul").eq(i).find("li");
        var _attr;
        
        name = _arr[i].split("=")[0];
        attr = _arr[i].split("=")[1];
        div_attr.each(function(){
            var obj = $(this)
            _attr = obj.attr("data-attr");
            if(name == name && attr == _attr){
                obj.addClass("on").siblings().removeClass("on");
            }
        });
    }
}

https://www.jianshu.com/p/2eb38fab01bd?tdsourcetag=s_pcqq_aiomsgcss

ul,li {
    list-style:none;
}
.on{
    background-color:#f01400;
    color:#ffffff !important;
}

.select-box ul > li:first-child, .select-result ul > li:first-child{
    color:black;
    pointer-events:none;
}

.select-box ul>li{
    float: left;
    width: 80px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    color:#c9c9c9;
    cursor: pointer;
    margin: 5px 0;
}

.select-box ul, .select-result{
    clear:both;
}

.select-result li{
    float:left;
    width: 80px;
    text-align : center;
    padding:3px 0;
    color:#c9c9c9;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。