單擊事件時更改對象值

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/