javascript - 在单击事件上更改对象值

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);

我真的不知道你想用味道等做什么，但这就完成了颜色。

fiddle 的更新版本:http://jsfiddle.net/z3Ka8/2/