记录--前端 页面 jquery 被点击按钮修改样式 其他默认

Posted 2020-06-23 uimcc.com#UNCLE CHEN#

 

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>

贴个效果图