一，完成内容
js-任务三
使用使用工具：JQUERY库
操作逻辑：
1.将页面二所储存洗牌后生成的数组数据在页面三中提取
使用知识点：localstorage本地永久储存中的getItem("")
方法，提取为字符串类型，然后再使用
split(",")方法将字符串类型转化成数组。
2.查看玩家身份
步骤：1》先为玩家身份添加按钮点击事件
2》根据点击过程切换显示和隐藏来查看并传递玩家身份
*(主要思路为判断点击数为奇数或偶数来显示和隐藏文本内容)
3》查看到最后当切换时超出玩家数将显示为法官查看
并为按钮添加跳转新页面的点击事件
使用知识点：*加载执行函数$(document).ready()
*点击事件click()
* 切换显示和隐藏方法toggle()
* 显示方法show()
* 隐藏方法hide()
* 捕获文本内容text()
* if ..... （else if）判断语句
3.查看完毕点击按钮跳转到新页面将展示所有玩家身份
步骤：1》在新页面提取数组
2》使用遍历排列数组
3》创建盒子元素对应数组，然后添加到对应的父元素中
使用知识点： *加载执行函数$(document).ready()
*localstorage本地永久储存中的getItem("")
方法，提取为字符串类型，然后再使用
split(",")方法将字符串类型转化成数组。
*创建元素$("<>标签</>")
*添加类样式addClass()
* 捕获文本内容text()
*添加元素append（）
*遍历each(对象,function（下标，内容）{})
$(document).ready(function(){
var getArr= localStorage.getItem("arr");//提取玩家数据字符串
var Arr=getArr.split(",");//转换成数组
var a=0;//初始值→点击次数
var b=0;//初始值→获取数组下标索引
$(".main-dbl").hide();//初始状态隐藏玩家内容
$(".btn").click(function(){
//判断点击次数为偶数显示状态
if(a%1==0){
$(this).text("隐藏并传递给"+(b+2)+"号");//替换按钮文本
$(".main-ico").hide();//隐藏
$(".main-dbl").show();//显示
$("h3").text(Arr[b]);//获取下标对应内容
b+=1;//当点击次数为偶数时传递一次
a+=0.5;//每点击两次递增一次数字
}
//判断点击次数为奇数显示状态
else if(a!=0){
$(this).text("查看"+(b+1)+"号身份");//替换按钮文本
$(".main-ico").show();//显示
$(".main-dbl").hide();//隐藏
$("h3").text(Arr[b]);//获取下标对应内容
$(".main-num").text(b+1);//显示框标记
a+=0.5;//每点击两次递增一次数字
}
//判断当下标超出数组长度时触发事件
if(b>Arr.length-1) {
$(".main-num").text(b);//显示框标记
$(this).text("法官查看");//替换按钮文本
//跳转新页面点击事件
$(this).click(function(){
window.location.href="task2-4.html";
})
}
})
})
新页面添加元素
$(document).ready(function(){
var Arr=localStorage.getItem("arr");
var arr=Arr.split(",");
$.each(arr,function(i,box){
var box1=$("<div></div>").addClass("div1");
var box2=$("<div></div>").addClass("div2");
box1.text(box);
box2.text((i+1)+"号");
var box=$("<div></div>").addClass("div").append(box1).append(box2);
$(".main").append(box);
})
})
二.明天收尾任务三，继续学习JQuery
返回列表
评论