临时存存储页面上的数据---js中的cookie-白红宇

临时存存储页面上的数据---js中的cookie

阅读量：6846 次

发布时间：2019-06-26

本文共 3071 字，大约阅读时间需要 10 分钟。

实现的效果：

当点击某个按钮的时候，实现点击A的同时，弹出B的注册div，使填写在B信息数据保存下来，点击B的确定按钮，B消失，A的图标往后移动一格，原来的位置为图标C,点击C可以弹出来一个链接的页面（页面链接是从B信息里读取出来的），然后依次类推。。。

1 方法一： 2 $(function(){ 3               4              $(".add1").click(function(){ 5                 var div = $("#show1"); 6                 if ( div.css("display") === "none" ) { 7                     $(".add1").css("opacity",0.4); 8                     div.show(); 9                     $('input').val("");10                     $("#show2").css("display","none");11                 } else {12                     div.hide();13                      $('input').val("");14                 }15             });16                         17 //            按钮事件开始                18              $("#button").click(function(){19                  var num=0;20                  var val1 = $(".input-read1").val();21                  var val2 = $(".input-read2").val();22                  $("#show1").css("display","none");23                  $(".add1").animate({left:'70px',opacity:'1'},"fast");24 25                  $(".add2").css("display","block");26                   $.cookie("input-val1", val1, { expires: 0.05});27                  $.cookie("input-val2", val2, { expires: 0.05 });28                  29                 var MyCookie1 = $.cookie('input-val1');30                 var MyCookie2 =  $.cookie('input-val2');31                 $(".icon-index").html(MyCookie1+'
'+MyCookie2);32                   //第二个隐藏开始33                 $(".add2").click(function(){34                     var div = $("#show2");35                     if ( div.css("display") === "none" ) {36                         div.show();37                         $("#show1").css("display","none");38                         } else {39                         div.hide();40                     }41                     $(".if1").attr("src",MyCookie2);42                     43                 });44                 45 //             结束46              })47         })48

但是问题是：没有办法继续往后移动

思路：假使需要4个图标，设置4个按钮A,4个B,4个C,控制每点击一个的样式，虽然麻烦，但是代码还是比较繁琐，需要改进

1   2   3   4 
       5     jquery的cookie测试  6       8   9  10 
      11     
     
 12     
     
 13     
     
 14     
     
 15     
     
 16     
     
     17     
     
     18     
     
     19     
     
     20      21      22     
     
       23         名称：
      
      
      
 24         地址：
      
      
      
 25         
       26     
     
 27     
     
       28         名称：
      
      
      
 29         地址：
      
      
      
 30         
       31     
     
 32     
     
       33         名称：
      
      
      
 34         地址：
      
      
      
 35         
       36     
     
 37     
     
       38         名称：
      
      
      
 39         地址：
      
      
      
 40         
       41     
     
 42     
      43     
     
       44         
       45     
     
 46     
     
       47         
       48     
     
 49     
     
       50         
       51     
     
 52     
     
       53         
       54     
     
 55      56      57     
     
 58      59      60     178     179 180

转载于:https://www.cnblogs.com/hjt-7/p/5795662.html

你可能感兴趣的文章