Use jquery and PHP to implement a function switch effect

This article describes the use of jquery, PHP and MySQL to achieve a similar security guard firewall turned off the switch, you can apply this feature to the function of the opening and closing functions, the need for friends can refer to the

  Preparation in order to better illustrate this example, we need a data table, record the required function description and the open state, the table structure is as follows:     code as follows: CREATE TABLE ' Pro ' (    ' id ' int (one) N OT null auto_increment,     ' title ' varchar NOT NULL,     ' description ' varchar is not NULL, &NB Sp   ' status ' tinyint (1) Not NULL default ' 0 ',     PRIMARY KEY   (' id ')  ) Engine=myisam  defau LT Charset=utf8;     You can insert a few data into the table Pro.   index.php   We want to display a list of related features on the page, use PHP to read the datasheet, and show it as a list.   Code as follows: <?php       require_once (' connect.php '); Connection Database        $query =mysql_query ("SELECT * FROM pro-ID ASC");       while ($row =mysql_fetch_array ($query)) {      ?>      & Nbsp;<div class= "List" >         <div class= "Fun_title" >            <span rel= "<?php echo $row [' id '];? > "<?php if" ($row [' status ']==1) {?>    class= "ad_on" title= "click Close" <?php}else{?>class= "Ad_off" title= "click to open" <?php}?>></span>             <h3><?php echo $row [' title ']?></h3>        &NBS p;</div>         <p><?php echo $row [' description '];? ></p>       </div>     <?php}?>     connection database, The product Feature List is then recycled.   CSS   In order to render a better appearance of the page, we use CSS to beautify the page, so that the page more in line with humanity. With CSS, we just use a picture to identify the switch button.     Code as follows:. list{padding:6px 4px border-bottom:1px dotted #d3d3d3; position:relative}    Fun_title{height : 28px; LINE-HEIGHT:28PX}    fun_title span{width:82px; height:25px background:url (Switch.gif) no-repeat;   & nbsp Cursor:pointer; Position:absolute; right:6px; TOP:16PX}    fun_title span.ad_on{background-position:0 -2px}    fun_title span.ad_off{ background-position:0 -38px}    fun_title h3{font-size:14px; font-family: ' Microsoft Yahei ';}   . List p{line-height:20px}    list P Span{color: #f60}    cur_select{background: #ffc}     CSS code, I do not want to elaborate, prompted us to use a picture, and then through the background-position to locate the location of the picture, which is the most of the use of the site, the advantages we do not say.   JQuery   We click on the switch button, timely request backstage, change the corresponding function switch state. This process is a typical AJAX application. By clicking on the Switch button, the front end of PHP sends POST request, the backstage receives the request, and queries the database, and returns the result to the front end, the front-end jquery changes the button state according to the result of the backstage return.     Code as follows: $ (function () {      //mouse sliding to color        $ (". List"). Hover ( function () { &nbsP         $ (this) addclass ("Cur_select");       },function () {           $ (this) removeclass ("Cur_select"); nbsp;     });         //off        $ (". ad_on"). Live ("Click", Function () {   & nbsp       var add_on = $ (this);            var status_id = $ (this) attr ("rel");            $.post ("action.php", {status:status_id,type:1},function (data) {   & nbsp           if (data==1) {                   Add_o N.removeclass ("ad_on"). AddClass ("Ad_off"). attr ("title", "Click to open");               }else{               &NBSP ;   Alert (data);               }          &nbsp });       });       //opening        $ (". Ad_off"). Live ("Click", Function () {     & nbsp     var Add_off = $ (this);            var status_id = $ (this) attr ("rel");            $.post ("action.php", {status:status_id,type:2},function (data) {alert (data);                  if (data==1) {                   Add_off.removeclass ("Ad_off"). AddClass ("ad_on"). attr ("title", "click Close");               }else{               &NBSP ;   Alert (data);               }           }       });   });     Description, the code, the first implementation of the mouse function list to the function of the color (see Demo), and then is to click the Switch button, to the background action.php send Ajax request, the submitted parameters are the corresponding function ID and tYpe, the type of feature and request (open and close) that is used to background differentiate requests. In fact, we have a little attention, you can see that, according to the AJAX request successful return results, switch button dynamic change style, realize the function of changing the state of the switch.   action.php   Background action.php receive front-end requests, execute SQL statements according to parameters, update the status of corresponding functions, and return the results to the front end after success, see Code:   Code: require_once (' Connect.php ');    $id = $_post[' status '];    $type = $_post[' type '];    if ($type ==1) {//off        $sql = "Update Pro set status=0 where id=". $id;   }e lse{//Open        $sql = "Update Pro set Status=1 where id=". $id   }    $rs = Mys Ql_query ($sql);    if ($rs) {       echo ' 1 ';   }else{       echo ' server busy, please try again later ！ ';   }