jquery实现页面条件筛选
此功能类似淘宝的条件筛选,主要是页面样式的更改,问了大神也磨磨唧唧了很久才搞定0.0....
先贴代码.....
代码知识有
border-radius 设置圆角边框
siblings() 同胞元素,这个是重点
<style type="text/css"> .list dd{margin:-20px 0px 0px 40px;} .list dd a{padding-right:10px; text-decoration: none;} .se{ display:inline-block; padding:2px 6px; background-color: red; border-radius:2px; text-align: center;} </style> <script type="text/javascript"> $(function(){ }) function ck(id,zhi,obj){ $(id).val(zhi); /*复制给隐藏域input*/ $(obj).addClass(‘se‘); /*这里是添加样式,其中的se指的是class样式* $(obj).siblings().removeClass(‘se‘); /*这里是移除同胞(同级)样式,其中的se指的是class样式*/ /* $(obj).attr(‘style‘,‘color:red;‘); 这里用了两种方式在jquery更改样式,个人觉得上面那种更方便 $(obj).siblings().attr(‘style‘,‘‘); */ var tt=$(‘#yilou‘).val(); var bb=$(‘#erlou‘).val(); alert(tt); alert(tt+"---"+bb); $.post(‘../demo/cssDemo‘,{‘tt‘:$(‘#yilou‘).val(),‘bb‘:$(‘#erlou‘).val()},function(data){ /* 异步请求*/ alert(data); })
} </script> <div class="list"> <dl> <dt>一楼</dt> <dd> <a href="javascript:void(0)" onclick="ck(‘#yilou‘,‘1‘,this)">一房</a> <a href="javascript:void(0)" onclick="ck(‘#yilou‘,‘2‘,this)">二房</a> <a href="javascript:void(0)" onclick="ck(‘#yilou‘,‘3‘,this)">三房</a> <input type="hidden" id="yilou"/> </dd> </dl> <dl> <dt>二楼</dt> <dd> <a href="javascript:void(0)" onclick="ck(‘#erlou‘,‘1‘,this)">一房</a> <a href="javascript:void(0)" onclick="ck(‘#erlou‘,‘2‘,this)">二房</a> <a href="javascript:void(0)" onclick="ck(‘#erlou‘,‘3‘,this)">三房</a> <input type="hidden" id="erlou"/> </dd> </dl> </div>
贴个效果图
时间: 2024-11-05 21:50:03