今天完成的事情

1. 一  杀手杀人页面选择玩家背景颜色替换

明天计划的事情

一  杀手杀人页面的其他业务逻辑

遇到的问题

•  一   如何在杀手杀人过后对被杀玩家的背景颜色做出替换;

• 初步思路: 通过jQuery类选择器,给这类元素设置点击事件,然后设置点击时背景颜色替换;
• 
• 
  
• 问题一: 然而出现了所有这类元素同时出现了背景颜色的替换
• 
• 
  
• 原因分析: 出现这种情况并不让人感到意外,因为jQuery类选择器选择的是所有这类元素,所以当用户点击后所有带有 class="box-name" 属性的元素都会改变背景颜色
• 
  
• 解决方案:同时jQuery有"$(this)"这样的选择器,含义是选取当前 HTML 元素,其他元素并不会收到影响
• 
• 
  
• 问题二:对元素进行多次点击时,多次点击的效果累计在了一起,
• 也就是说我们想要的是类似单选的效果,而不是复选的效果
• 

• 原因分析 :  这样的代码什么也没交代,翻译过来就是,给当前点击的元素添加一个样式,当多次点击其他元素时,对应的当前元素都会添加这个样式
• 
• 
  
• 解决方案: 每次点击元素后,先重置所有的背景样式,再指定当前元素的样式
• 
• 
  

• 问题二:杀手不能杀自己人,如何判断玩家是否是杀手?

• 
• 
  
• 未解决的疑问:
• 通过jQuery控制css样式的方式在教程上有两种方式:
• 
  
• 1>以css外联样式的方式,通过jQuery控制css的类;
• 2>以css内嵌样式的方式,通过jQuery直接控制具体的样式属性;
• 
  
• jQuery控制的类权重太低不足以覆盖之前的样式,特别是使用sass的嵌套功能后,原先的选择器(各种选择器混用)权重提高,
• 导致的后果就是要使用@important规则强制提高这个类的权重,但这样的处理方式会增加浏览器渲染的负担
• 
  
• 第二种方式不太方便控制过多的样式,而且是通过内嵌的方式,由于内嵌样式的权重在css默认规则中最高,也会造成多次遍历渲染树降低了性能,同时也不符合模块化的思想
• 
  
• 感觉这两种控制css的方式都非常勉强啊,哪种方式合适一些呢?
• 
  
• 
  
• 
  
• 
  

收获

一  选择器:$(this)

定义:取出当前对象并转换为jQuery对象

二  index()方法

定义:index() 方法返回指定元素相对于其他指定元素的 index 位置。

这些元素可通过 jQuery 选择器或 DOM 元素来指定。