今天完成的事
1，可以根据投票页面传回的信息后显示生成第二天的html：
关键代码：
if (newRecord != null) {
if (newRecord[data]["days"] == data+1) {
var daytimeOrder = newRecord[data]["daytime"];
var truth_2 = roleList_s[daytimeOrder-1]["role"];
$(".message-daytime").text(daytimeOrder + "号被投票投死了，真实身份是" + truth_2);
data +=1;
// $(".main-start").eq(data).children(".start-process").hide();
// $(".main-start").eq(data).children(".start-sign-box").hide();
$(".start-process").hide();
$(".start-sign-box").hide();
$(".main-game").append(`
<div class="main-start">
<div class="start-day"></div>
<div class="start-sign-box">
<div class="start-sign"></div>
</div>
<div class="start-process">
<div class="process-box">
<div class="process-one process-triangle">
<img src="image/moon.png">
<div>杀手杀人</div>
</div>
<div class="mt20 message-night"></div>
<div class="process-two process-triangle">
<img src="image/sun.png">
<div>亡灵发表遗言</div >
</div>
<div class="process-three process-triangle">玩家依次发言</div>
<div class="process-four process-triangle">全民投票</div>
<div class="mt20 message-daytime"></div>
</div>
</div>
</div>`);
$(".start-day").eq(data).text("第" + (data+1) + "天");
fsm.jump1();
// $(this).css("background-color","#83b09a").addClass("change");
}
}
2，将先前的代码进行拆分，让其各自对应的页面，避免加载不属于当前页面的代码，并且减少导致混乱的问题；
3，解决jquery动态生成的元素绑定点击事件无效的问题；
明天的计划
1，解决页面跳转状态无法保存的问题；
遇到的问题
1，页面跳转时如何保存其状态的问题，目前想到的事根据储存的数据再次渲染页面，但也会导致代码更加复杂；暂时未解决；
2，jquery动态生成的元素绑定点击事件无效；
解决办法：
https://blog.csdn.net/qq_37860963/article/details/80715091
https://www.cnblogs.com/leiting/p/9323539.html （采用的）
收获
1，jquery动态生成的元素绑定点击事件无效的解决方法：
现在修正后的写法，
$(document).on('click', '.process-two', function() {}
从前的写法：
$(".start-day").click(function() {}
两种写法的对比，如过是本身html文件中就有元素，使用普通的写法不会出现什么问题，但是当使用js动态生成元素后，在添加点击事件却是无效的，这是需要将事件绑定到可以让新生成元素可以依托的对象，比如新生成元素与之同级元素的共同父元素，或者所有body内的元素都可以将body当作间接父元素，新生成的元素自然也不例外，都可以将其点击事件委托到body上
比如：
$('body').on('click','.search-item',function(){}
然后还可以更近一步的把整个html文档作为事件委托的对象【docment】，上面第一种写法；
2，解决多个同样类名元素后绑定同一点击事件，会同时触发的问题：
var regexp2 = /\d/;
//可点击用于隐藏或展示每天的游戏信息
$(".start-day").click(function() {
//获取当前点击的元素的天数当作在html中的索引
var a = $(this).text().match(regexp2);
// $(this).children(".start-process").toggle();
// $(this).children(".start-sign-box").toggle();
$(".start-process").eq(a-1).toggle();
$(".start-sign-box").eq(a-1).toggle();
});
使用对应的索引，定位到当前发生点击事件的元素上；
返回列表
评论