2013-09-22 13 views
1

Попытка изменить значение цвета rectBox объекта при событии click. Не знаете, как это сделать или что я делаю неправильно. любая помощь была бы оцененаизменить значение объекта при событии click

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'; 
      } 
     } 
    })(); 
+1

где «rectBox» ?? и будет helful, если и может создать jsfiddle и состояние именно то, что является проблемой? – iJade

+0

у вас есть функция drawrect (rectBox, ctx) ', тогда вызывается' drawrect (rectBox, ctx, color); 'который не соответствует –

ответ

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/

+0

Большое вам спасибо, вот и все. –

+0

@TravisMichaelHeller Просто для удовольствия, используйте объект: http://jsfiddle.net/z3Ka8/3/ –

+0

Как работает colorIndex? Я немного смущен тем, как вы связываете все это вместе, если не возражаете объяснить немного больше, спасибо –

1

Часть, которая добавляет обработчик щелчка любопытное неправильно. 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');     
     } 
    } 

Demo http://jsfiddle.net/krasimir/z3Ka8/1/

+0

По-прежнему не повезло, когда цвет изменился при нажатии на кнопки. но вы помогли мне избавиться от addEventListener и использовать метод «on». –

+0

Я думал, что вы хотите изменить атрибут объекта rectBox, а не цвет какого-либо элемента в DOM. Это так? – Krasimir

+0

Я хочу, чтобы иметь возможность нажимать на кнопку и в зависимости от того, какая кнопка нажата, измените цвет окна на соответствующий цвет. надеюсь, что с –

Смежные вопросы