使用来自不同按钮的“click”事件的meteor将不同的数据/颜色传递给canvas元素

问题描述 投票:0回答:1

我需要使用Meteor分离每个按钮的功能。 (例如:红色按钮 - >使画布变红,蓝色按钮 - >使画布变蓝,等等)

这就是我尝试过的:

HTML

<body>
 <main>
    <canvas class='background' width="400" height="200"></canvas>
    <button id='red'>RED</button>
    <button id='blue'>BLUE</button>
    <button id='green'>GREEN</button>

  </main>
</body>

Template.js

Template.body.helpers({
  hello: 'Hi World'
})

Template.body.events({
  'click.red': function (e) {
    $('.background').css({ "background-color": "#ff0000", "color": "white" });
  }
});
Template.body.events({
  'click.blue': function (e) {
    $('.background').css({ "background-color": "#0000ff", "color": "white" });
  }
});
Template.body.events({
  'click.green': function (e) {
    $('.background').css({ "background-color": "#01bf2a", "color": "white" });
  }
});
javascript meteor meteor-blaze
1个回答
0
投票

使用click #red而不是click.red。流星中的选择器的工作方式类似于html-css-js-#的id和。上课。

Template.body.events({
  'click #red': function (e) {
    $('.background').css({ "background-color": "#ff0000", "color": "white" });
  }
});
Template.body.events({
  'click #blue': function (e) {
    $('.background').css({ "background-color": "#0000ff", "color": "white" });
  }
});
Template.body.events({
  'click. #green': function (e) {
    $('.background').css({ "background-color": "#01bf2a", "color": "white" });
  }
});
© www.soinside.com 2019 - 2024. All rights reserved.