js面向对象的简单例子

最新推荐文章于 2021-09-17 17:40:10 发布

夏岭

最新推荐文章于 2021-09-17 17:40:10 发布

阅读量703

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Hi_xiexialing/article/details/56023905

本文介绍了一种基于网页的消息操作方案，包括消息的删除、全选/全不选、单击选择以及标记已读等功能。通过JavaScript实现了这些交互功能，提高了用户在处理大量消息时的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

		<div class="tab-pane">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th></th>
                            <th>标题</th>
                            <th>类型</th>
                            <th>发送时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td><input type="checkbox" class="btnSelect" /></td>
                            <td><a href="<%=path%>/pages/xtgl/notice/noticeDetail.jsp"><span class="glyphicon glyphicon-envelope"></span>
                                恭喜你获得200元优惠券</a></td>
                            <td></td>
                            <td>2014/2/12 12:12:21</td>
                            <td><a class="del">删除</a></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" class="btnSelect" /></td>
                            <td><a href="">恭喜你获得50元优惠券</a></td>
                            <td></td>
                            <td>2016/2/12 12:12:21</td>
                            <td><a class="del">删除</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <%--标记是否已读--%>
                <div class="isread-check">
                    <label><input type="checkbox" class="left" id="btnSelectAll" /> 全选</label>
                    <button class="btn btn-primary" id="btnMarkRead">标为已读</button>
                </div>

                 //我的信息删除、全选/全不选、单击tr选定/取消、标记已读操作
    var MyInfoOperate = function( obj ){
         //信息删除
         $( obj.del ).click( function(){
             $( this ).parents( "tr" ).remove();
         } );
        //全选/全不选
        $( obj.btnSelectAll ).click( function(){
             var i = 0,
                 $btnSelect = $( obj.btnSelect ),
                 len = $btnSelect.length;   //复选按钮的length
            for( ; i < len; i++ ){          //循环复选框的按钮
                 if( !$btnSelect.eq( i ).prop( "checked" ) ){     //如果有未选定的复选框
                     $btnSelect.prop( "checked", true );   //全选
                     $( this ).prop( "checked", true );    //自己选定
                     return;
                 }
            }
            $btnSelect.prop( "checked", false );            //如果已经全部选定，则全不选
            $( this ).prop( "checked", false );             //自己取消选定
        } );
        //单击tr选定该栏的复选框框
        $( "tr" ).click( function(){
            var $targetEle = $( this ).children( "td" ).eq( 0 ).children( "input[ type= 'checkbox' ]" ),  //目标元素
                flag = $targetEle.prop( "checked" );         //标记目标元素的状态
             if( !flag ){                                    //如果未选定，则选定
                 $targetEle.prop( "checked", true );
             }else{                                          //如果选定，则取消选定
                 $targetEle.prop( "checked", false );
             }
        } );
        //单击复选框阻止冒泡
        $( "table input[ type= 'checkbox' ]").bind( "click", function(){
            var flag = $( this ).prop( "checked" );         //标记复选框状态
            if( !flag ){                                    //未选定
                $( this ).prop( "checked", true );         //如果未选定，则选定
            }else{                                         //选定
                $( this ).prop( "checked", false );       //取消选定
            }
        } );
        //标记已读
        $( obj.btnMarkRead ).click( function(){
            var i = 0,
                $btnSelect = $( obj.btnSelect ),
                len = $btnSelect.length;   //复选按钮的length
            for( ; i < len; i++ ) {          //循环复选框的按钮
                if( $btnSelect.eq( i ).prop( "checked" ) ) {     //如果是选定的复选框
                    $btnSelect.eq( i ).parent( "td" ).next( "td" ).find( "span" ).removeClass( "glyphicon-envelope" );
                }
            }
        } )

    };

    new MyInfoOperate( {
        del: ".del",                    //删除按钮
        btnSelect: ".btnSelect",        //复选按钮
        btnSelectAll: "#btnSelectAll",  //全选
        btnMarkRead: "#btnMarkRead"     //标记已读
    } )