Question

我需要使用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" });
  }
});

Answer 1

使用click #red代替click.red。流星中的选择器的工作方式与id和的ins html-css-js-＃类似。上课。

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

使用流星从不同按钮的“单击”事件向画布元素传递不同的数据/颜色

1 个答案: