需要有关如何使用on（）的帮助；

 

 js / app.js

//问题：没有用户交互，不会更改应用程序

//解决方案：用户交互时，导致了相应的更改

var  color  =  $ （“ .selected” ）。css （“ background-color” ）; 

//当单击控件列表项$ （“ .controls li” ）时。on （）（function （）{ //取消选择兄弟元素$ （this ）。兄弟姐妹（）。removeClass （“ selected” ）; //选择被单击元素$ （this ）。addClass

 

  （“已选择” ）；

//缓存当前颜色color = $ （this ）。css （“ background-color” ）; }）; //当按下“ New Color”时，$ （“ #revealColorSelect” ）。click （function （）{ //显示颜色选择或隐藏颜色选择changeColor （）; $ （“ #colorSelect” ）。toggle （）; }）; //更新新的颜色范围函数changeColor （）{ var r = $  

 

     （“ #red” ）。val （）; 

var g = $ （“ #green” ）。val （）; var b = $ （“ #blue” ）。val （）; $ （“ #newColor” ）。css （“ background-color” ，“ rgb（” + r + “，” + g + “，” + b + “）” ）；} //当颜色滑块更改$ （“ input [type = range]” ）。改变     

 

（changeColor ）; 

//当按下“添加颜色”时，$ （“ #addNewColor” ）。单击（函数（）{ //追加颜色与对照UL VAR $ newColor = $ （“<LI> </ LI>” ）; $ newColor 。CSS （“背景颜色” ，$ （“#newColor” ）。CSS （“背景颜色” ））; $ （“.controls UL” 。）追加（$ newColor ）;

 

  。点击（）; 

}）; 

//关于画布上的鼠标事件//绘制线条

 

  

 index.html

<！DOCTYPE html> 

< html > 

< head > 

< title >简单图形应用程序</ title > < link rel = “ stylesheet” href = “ css / style.css” type = “ text / css” media = “屏幕”标题= “无标题”字符集= “ utf-8” > </头> <正文> <画布宽度= “ 600”高度= “ 400”    

 

      > </ canvas > 

< div class = “ controls” > < ul > < li class = “ red selected” > </ li > < li class = “ blue” > </ li > < li class = “黄色” > < / li > </ ul > < button id = “ revealColorSelect” >新颜色</ button >< div ID =     

 

         “ colorSelect” > 

< span id = “ newColor” > </ span > < div class = “ sliders” > < p > < label for = “ red” >红色</ label > < input id = “ red” name = “红色”类型= “范围”最小值= 0最大值= 255值= 0 ></ p > <             

 

                p > 

<标签为= “绿色” >绿色</标签> <输入ID = “绿色”名称= “绿色”类型= “范围”分钟= 0最大= 255值= 0 > </ p > < p > <标签为= “ blue” >蓝色</标签> <输入ID = “蓝色”                     

 

                      名称= “ blue” 类型= “范围”  min = 0  max = 255  value = 0 > 

</ p > </ div > < div > < button id = “ addNewColor” >添加颜色</ button > </ div > < / div > </ div > <脚本src = “ //code.jquery.com/jquery-1.11.0.min.js”类型=                

 

      “ text / javascript”  charset = “ utf-8” > </脚本> 

< script src = “ js / app.js” type = “ text / javascript” charset = “ utf-8” > </脚本> </ body > </ html >           

 

 

 

答：这是正确的答案。将注意力转移到第6行

 

//问题：没有用户交互，不会更改应用程序

//解决方案：用户交互时，导致了相应的更改

var  color  =  $ （“ .selected” ）。css （“ background-color” ）; 

//当单击控件列表项$ （“ .controls” ）时。on （'click' ，'li' ，function （）{ //取消选择兄弟元素$ （this ）。siblings （）。removeClass （“ selected” ）; //选择被单击元素$

 

  （这个）。addClass （“ selected” ）; 

//缓存当前颜色color = $ （this ）。css （“ background-color” ）; }）; //当按下“ New Color”时，$ （“ #revealColorSelect” ）。click （function （）{ //显示颜色选择或隐藏颜色选择changeColor （）; $ （“ #colorSelect” ）。toggle （）; }）; //更新新的颜色范围函数changeColor （）{  

 

  var  r  =  $ （“ #red” ）。val （）; 

var g = $ （“ #green” ）。val （）; var b = $ （“ #blue” ）。val （）; $ （“ #newColor” ）。css （“ background-color” ，“ rgb（” + r + “，” + g + “，” + b + “）” ）；     

 

“ input [type = range]” ）。change （changeColor ）; 

//当按下“添加颜色”时，$ （“ #addNewColor” ）。单击（函数（）{ //追加颜色与对照UL VAR $ newColor = $ （“<LI> </ LI>” ）; $ newColor 。CSS （“背景颜色” ，$ （“#newColor” ）。CSS （“背景颜色” ））; $ （“.controls UL” ）。

 

  ）; 

//选择新颜色$ newColor 。点击（）; }）; //关于画布上的鼠标事件//绘制线条