Question

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

这是我的代码

    <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

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

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/

Answer 2

如果添加其他颜色，则引用该颜色索引而不是您可以使用的名称：

(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/

更改click事件的对象值

2 个答案: