day17--11/12章节对模态框的优化与对菜单的优化

1、对08章节的模态框进行优化

08章节的模态框，通过读取td标签的内容来实现，还使用了索引；

这样的缺点是 当在某个位置插入td标签时，jquery中读取td标签内容的代码均需要进行调整；

（1）将08模态框中的td标签加上一个target属性，html代码如下：

        <a onclick="addElement();">添加</a>
        <table border="1">
            <tr>
                <td target="hostname">1.1.1</td>
                <td target="port">80</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a>删除</a>
                </td>
            </tr>
            <tr>
                <td target="hostname">1.1.2</td>
                <td target="port">90</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a>删除</a>
                </td>
            </tr>
            <tr>
                <td target="hostname">1.1.3</td>
                <td target="port">100</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a>删除</a>
                </td>
            </tr>
            <tr>
                <td target="hostname">1.1.4</td>
                <td target="port">110</td>
                <td target="ip">80</td>
                <td>
                    <a class="edit">编辑</a> | <a>删除</a>
                </td>
            </tr>
        </table>
        
        <div class="modal hide">
            <div>
                <input name="hostname" type="text" />
                <input name="port" type="text" />
                <input name="ip" type="text" />
                
            </div>
            <div>
                <input type="button" value="取消" onclick="cancleModal();" />
            </div>
        </div>
        
        <div class="shadow hide"></div>

（2）css代码没有调整：

　　　　　　.modal{
                position: fixed;
                top: 50%;
                left: 50%;
                width: 500px;
                height: 400px;
                margin-top: -250px;
                margin-left: -250px;
                background-color: #F5DEB3;
                z-index: 10;
            }
            .shadow{
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0.6;
                background-color: #000000;
                z-index: 9;
            }
            .hide{
                display: none;
            }

（3）对jquery代码中的编辑代码做了优化：

            function addElement(){
                $('.modal,.shadow').removeClass('hide');
            }
            function cancleModal(){
                $('.modal,.shadow').addClass('hide');
                $('.modal input[type="text"]').val('');
            }
            
            $('.edit').click(function(){
                //this是指当前标签
                $('.modal,.shadow').removeClass('hide');
                var tds=$(this).parent().prevAll();
                    
                tds.each(function(){
                    //this ，代指每个td
                    var v=$(this).attr('target');    //获取target的属性值；需要将其属性值赋给 b；将 td标签target="hostname"与input输入框中name="hostname"联系起来；同理将port，ip也联系起来
                    var text=$(this).text();
                    var a1='.modal input[name="';
                    var a2='"]';
                    temp=a1+v+a2;
                    $(temp).val(text);
                    // $('.modal input[name="'+v+'"]').val(text);  //将上述内容合并在一起
                })

这样的话，执行结果是一样的；但是要增加td标签时，只需要在表格中，增加即可，不需要再操作 js代码。

2、菜单栏代码优化：点击某一个菜单，其内容显示；别的菜单的内容隐藏：

点击某个菜单时，该菜单显示别的颜色：

（1）html代码如下：

         <div style="width: 700px;margin: 0 auto;">
            <div class="menu">
                <div class="menu-item active" a="1">菜单一</div>
                <div class="menu-item" a="2">菜单二</div>
                <div class="menu-item" a="3">菜单三</div>
            </div>
            <div class="content">
                <div b="1">内容一</div>
                <div class="hide" b="2">内容二</div>
                <div class="hide" b="3">内容三</div>
            </div>
         </div>

（2）css代码如下：

            .hide{
                display: none;
            }
            .menu{
                height: 38px;
                background-color: #EEEEEE;
                line-height: 38px;
            }
            .menu .menu-item{
                float: left;
                border-right:1px solid red ;
                padding: 0 5px;
                cursor: pointer;  //点击时鼠标变为手
            }
            .active{
                background-color: brown;
            }
            .content{
                min-height: 100px;
                border: 1px solid #eeeeee;
            }

（3）jquery实现部分，与1中js的想法相同

            <script src="jquery-1.12.4.js"></script>
            <script>
                $('.menu-item').click(function(){
                    $(this).addClass('active');
                    $(this).siblings().removeClass('active');
                    // $(this).addClass('active').siblings().removeClass('active');   //与上述方法执行结果一样
                    
                    var v=$(this).attr('a');     //将 a与b联系起来，这样将菜单与内容联系起来
                    // var a1='[b="';
                    // var a2='"]';
                    // var temp=a1+v+a2;
                    // $('.content').children(temp).removeClass('hide');
                    // $('.content').children(temp).siblings().addClass('hide');
                    $('.content').children('[b="'+ v+'"]').removeClass('hide').siblings().addClass('hide');    //与上述方法执行结果一样
                    
                })
            </script>

 （4）对（3）中使用jquery实现的方式，可以使用索引实现

index用来获取索引位置；分别点击菜单一、二、三时，可以在控制台看到获取的索引位置分别是 0,1,2；

使用jQuery实现时，可以不使用菜单与内容的a b属性：

$('.menu-item').click(function(){
                    $(this).addClass('active');
                    $(this).siblings().removeClass('active');
                    // $(this).addClass('active').siblings().removeClass('active');
                    
                    // var a=$(this).index();   // 菜单的索引
                    // console.log(a);        
                    // $('.content').children().eq(a).removeClass('hide').siblings().addClass('hide');
                    $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');                    
                })