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