1. Optimize the modal box of Chapter 08
The modal box of Chapter 08 is realized by reading the content of the td tag, and an index is also used;
The disadvantage of this is that when the td tag is inserted at a certain position, the code that reads the content of the td tag in jquery needs to be adjusted;
(1) Add a target attribute to the td tag in the 08 modal box, and the html code is as follows:
<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) The CSS code is not adjusted:
.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) Optimized editing code in jquery code:
function addElement(){ $('.modal,.shadow').removeClass('hide'); } function cancleModal(){ $('.modal,.shadow').addClass('hide'); $('.modal input[type="text"]').val(''); } $('.edit').click (function () { ' $ (this refers to the current label//.modal, .shadow ' ) .removeClass ( ' hide ' ); var tds = $ ( this ) .parent (). prevAll (); tds.each (function () { // this, refers to each td var v = $ ( this ) .attr ( ' target ' ); // Get the attribute value of the target; need to assign its attribute value to b; connect the td tag target = "hostname" with the name = "hostname" in the input input box ; Similarly, port and ip are also linked var text = $ ( this ) .text (); var a1 = ' .modal input [name = " ' ; var a2 = '"] ' ; temp = a1 + v + a2; $ (temp) .val (text); // $ ('. modal input [name =" '+ v +' "] '). val (text) ; // will The above is merged together ))
In this case, the execution result is the same; but to add the td tag, you only need to add it in the table, no need to operate the js code.
2. Menu bar code optimization: click on a certain menu, its content is displayed; the content of other menus is hidden:
When you click a menu, the menu displays other colors:
(1) The html code is as follows:
<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="> Menu 3 </ div>"3 </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div>
</div>
(2) The css code is as follows:
.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; // clicks the mouse into a hand } .active { background -color: brown; } .content{ min-height: 100px; border: 1px solid #eeeeee; }
(3) jquery implementation part, the same idea as 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'); // Connect a and b, so that the menu is connected to the content // 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 ' ); // The same as the above method execution result }) </script>
(4) For the way of using jquery in (3), you can use the index to achieve
index is used to obtain the index position; when you click the menu one, two, three respectively, you can see the obtained index position on the console are 0, 1, 2;
When using jQuery, you can not use the ab attribute of the menu and content:
$('.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'); })