排序
点击某个排序时首先按升序显示，再次点击再变为降序，并且还会显示上升或下降箭头
页面排序跳转的思路是通过点击某个按钮时会向其
class属性添加/去除desc，并根据属性值进行url拼接
点击排序时
1. $(".sort_a").click(function () { 2. changeStyle(this); 3. let sort = $(this).attr("sort"); 4. sort = $(this).hasClass("desc") ? sort + "_desc" : sort + "_asc"; 5. location.href = replaceParamVal(location.href, "sort", sort,false); 6. 7. return false; 8. });
当点击的时候，改变样式，并进行请求的拼接，阻止默认的跳转行为
改变样式
1. function changeStyle(ele) { 2. // location.href = replaceParamVal(href, "pageNum", pn,flase); 3. // color: #333; border-color: #ccc; background: #fff 4. // color: #fff; border-color: #e4393c; background: #e4393c 5. $(".sort_a").css({"color": "#333", "border-color": "#ccc", "background": "#fff"}); 6. $(".sort_a").each(function () { 7. let text = $(this).text().replace("↓", "").replace("↑", ""); 8. $(this).text(text); 9. }) 10. 11. $(ele).css({"color": "#FFF", "border-color": "#e4393c", "background": "#e4393c"}); 12. $(ele).toggleClass("desc"); 13. //升降序改变 14. if ($(ele).hasClass("desc")) { 15. //降序 16. let text = $(ele).text().replace("↓", "").replace("↑", ""); 17. text = text + "↓"; 18. $(ele).text(text); 19. } else { 20. //升序 21. let text = $(ele).text().replace("↓", "").replace("↑", ""); 22. text = text + "↑"; 23. $(ele).text(text); 24. } 25. };
let text = $(ele).text().replace("↓", "").replace("↑", "");进行替换字符，显示在前端界面
价格区间
<input id="skuPriceFrom" type="number" th:value="${#strings.isEmpty(priceRange)?'':#strings.substringBefore(priceRange,'_')}" style="width: 100px; margin-left: 30px"> - <input id="skuPriceTo" type="number" th:value="${#strings.isEmpty(priceRange)?'':#strings.substringAfter(priceRange,'_')}" style="width: 100px"> <button id="skuPriceSearchBtn">确定</button>
增加input标签进行传递次数进行拼接
点击确认时
1. $("#skuPriceSearchBtn").click(function () { 2. let from = $(`#skuPriceFrom`).val(); 3. let to = $(`#skuPriceTo`).val(); 4. 5. let query = from + "_" + to; 6. location.href = replaceParamVal(location.href, "skuPrice", query,false); 7. });
库存存在
<li> <a th:with="check = ${param.hasStock}"> <input id="showHasStock" type="checkbox" th:checked="${#strings.equals(check,'1')?true:false}"> 仅显示有货 </a> </li>
点击查询时候
1. $("#showHasStock").change(function () { 2. alert( $(this).prop("checked") ); 3. if( $(this).prop("checked") ) { 4. location.href = replaceParamVal(location.href,"hasStock",1,false); 5. } else { 6. let re = eval('/(hasStock=)([^&]*)/gi'); 7. location.href = (location.href+"").replace(re,""); 8. } 9. return false; 10. });
replaceParamVal函数
1. function replaceParamVal(url, paramName, replaceVal,forceAdd) { 2. var oUrl = url.toString(); 3. var nUrl; 4. if (oUrl.indexOf(paramName) != -1) { 5. if( forceAdd ) { 6. if (oUrl.indexOf("?") != -1) { 7. nUrl = oUrl + "&" + paramName + "=" + replaceVal; 8. } else { 9. nUrl = oUrl + "?" + paramName + "=" + replaceVal; 10. } 11. } else { 12. var re = eval('/(' + paramName + '=)([^&]*)/gi'); 13. nUrl = oUrl.replace(re, paramName + '=' + replaceVal); 14. } 15. } else { 16. if (oUrl.indexOf("?") != -1) { 17. nUrl = oUrl + "&" + paramName + "=" + replaceVal; 18. } else { 19. nUrl = oUrl + "?" + paramName + "=" + replaceVal; 20. } 21. } 22. return nUrl; 23. };
