1

クリック イベントでオブジェクトの 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';
            }
        }
    })();
4

2 に答える 2

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/

于 2013-09-22T17:15:15.110 に答える
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/

于 2013-09-23T20:27:50.310 に答える