javascript - 更改 div 的颜色和数字 onclick

Question

我想在单击一个 div 时更改 html 元素的颜色和编号。 例如，当您单击 up-arrow 时，数字从 4 变为 5，并且颜色 也有变化。

initial state

↑ 4 ↓

upvoted

↑ 5 ↓

down voted

↑ 3 ↓

这是我目前所拥有的。
我知道如何在单击时更改 div 的颜色，但是我不知道如何通过单击另一个 div 来更改 div 的颜色。然后在上面添加 +1 或 -1。

http://jsfiddle.net/64QpR/23/

注意 - 用户:uneducatedguy刚问了同样的问题，但他删除了它，因为人们取笑他，因为他称它为 fiddle 而不是 jsfiddle。

Answer 1

使用 Knockout这真的很简单:

HTML:

<div class="arrow-up" data-bind="click: num.upvote.bind(num)"></div>
<h5 data-bind="text: num.value, css: { pink: num.changed }">3</h5>
<div class="arrow-down" data-bind="click: num.downvote.bind(num)"></div>

JavaScript:

function Num(value) {
    this.value = ko.observable(value);
    this.changed = ko.observable(false);
}

Num.prototype.upvote = function() {
    this.value(this.value()+1);
    this.changed(true);
}

Num.prototype.downvote = function() {
    this.value(this.value()-1);
    this.changed(true);
}

var model = {
        num: new Num(1),
}

ko.applyBindings(model);

查看实际效果:

http://jsfiddle.net/bikeshedder/UvKsz/

防止多次投票:

http://jsfiddle.net/bikeshedder/UvKsz/1/