单击事件时更改对象值

Question

试图更改单击事件时的对象rectBox颜色值。 不知道如何做到这一点或我做错了什么。 任何帮助，将不胜感激

http://jsfiddle.net/z3Ka8/

这里是我的代码

<div id="pageWrapper"> 
<canvas id="myCanvas" ></canvas> 
<div class="btnWrapper"> 
    <button class="buttonClass" id="button1" type="button">BUTTON1</button> 
    <button class="buttonClass" id="button2" type="button">BUTTON2</button> 
    <button class="buttonClass" id="button3" type="button">BUTTON3</button> 
    <button class="buttonClass" id="button4" type="button">BUTTON4</button> 
    <button class="buttonClass" id="button5" type="button">BUTTON5</button> 
</div> 

<!-- scripts --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
    <script> 
    (function() { 

     var color = 'green', 

     rectBox = { 
      x: 50, 
      y: 50, 
      width: 200, 
      height: 50, 
      backgroundColor: color, 
      borderWidth: 3 
     }; 

     var flavor = ['chocolate', 'vanilla', 'strawberry', 'rootbeer', 'bannana']; 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 

     function drawrect(rectBox, ctx) { 
      ctx.beginPath(); 
      ctx.rect(rectBox.x,rectBox.y,rectBox.width,rectBox.height); 
      ctx.fillStyle = rectBox.backgroundColor; 
      ctx.fill(); 
      ctx.lineWidth = rectBox.borderWidth; 
      ctx.strokeStyle = '#000000'; 
      ctx.stroke(); 
     }drawrect(rectBox, ctx, color); 

     var btn = $('.buttonClass'); 
     for(var i=0; i < btn.length; i++) { 
      btn[i].addEventListener('click', function(e) { 
      test(e.target.id, rectBox); 
      }, false); 
     } 

     function test(id, rectBox, color) { 
      if(id == "button1"){ 
       console.log(flavor[0]); 
       color = 'purple'; 
      } 
      if(id == "button2"){ 
       console.log(flavor[1]); 
       color = 'green'; 
      } 
      if(id == "button3"){ 
       console.log(flavor[2]); 
       color = 'pink'; 
      } 
      if(id == "button4"){ 
       console.log(flavor[3]); 
       color = 'brown'; 
      } 
      if(id == "button5"){ 
       console.log(flavor[4]); 
       color = 'yellow'; 
      } 
     } 
    })(); 

Answer 1

如果添加另一种颜色，则参考该颜色索引而不是您可以使用的名称：

(function ($) { 

    var color = 2, 
     flavor = ['chocolate', 'vanilla', 'strawberry', 'rootbeer', 'bannana'], 
     rectBox = { 
      x: 50, 
      y: 50, 
      width: 200, 
      height: 50, 
      backgroundColor: ['purple','yellow', 'green', 'brown', 'pink'], 
      borderWidth: 3 
     }; 

    var c = document.getElementById("myCanvas"); 
    var ctx = c.getContext("2d"); 

    function drawrect(rectBox, ctx, colorIndex) { 
     ctx.beginPath(); 
     ctx.rect(rectBox.x, rectBox.y, rectBox.width, rectBox.height); 
     ctx.fillStyle = rectBox.backgroundColor[colorIndex]; 
     ctx.fill(); 
     ctx.lineWidth = rectBox.borderWidth; 
     ctx.strokeStyle = '#000000'; 
     ctx.stroke(); 
    } 
    drawrect(rectBox, ctx, color);//draw with initial green color 

    // use the index of the element (button) in the group 
    $('#pageWrapper .btnWrapper').on('click', '.buttonClass', function (e) { 
     var myIndex = $(this).index('.buttonClass'); 
     drawrect(rectBox, ctx, myIndex); 
    }); 
})(jQuery); 

我真的不知道你想要什么样的味道等，但是这样做可以完成颜色。

更新您的小提琴版本：http://jsfiddle.net/z3Ka8/2/

Answer 2

它增加了点击处理程序是有点错误的部分。 btn [i]实际上是一个jQuery对象。它不是一个DOM对象。所以，你应该使用上方法附加事件：

for(var i=0; i < btn.length; i++) { 
    (function(index) { 
     btn.eq(index).on('click', function() { 
      test($(this).attr("id"), rectBox); 
     }); 
    })(i); 
} 

测试功能之后，你应该改变RectBox值：

function test(id, rectBox, color) { 
     if(id == "button1"){ 
      console.log(flavor[0]); 
      drawrect(rectBox, ctx, color = 'purple'); 
     } 
     if(id == "button2"){ 
      console.log(flavor[1]); 
      drawrect(rectBox, ctx, color = 'green'); 
     } 
     if(id == "button3"){ 
      console.log(flavor[2]); 
      rectBox.color = 'pink'; 
      drawrect(rectBox, ctx, color = 'pink'); 
     } 
     if(id == "button4"){ 
      console.log(flavor[3]); 
      rectBox.color = 'brown'; 
      drawrect(rectBox, ctx, color = 'brown'); 
     } 
     if(id == "button5"){ 
      console.log(flavor[4]); 
      rectBox.color = 'yellow'; 
      drawrect(rectBox, ctx, color = 'yellow');     
     } 
    } 

演示http://jsfiddle.net/krasimir/z3Ka8/1/