↑4↓

Question

我想在点击div时更改html元素的颜色和数量。例如，当您单击up-arrow时，数字会从4更改为5并且颜色会更改也发生了变化。

initial state

↑4↓

upvoted

↑ 5 ↓

down voted

↑ 3 ↓

这是我到目前为止所拥有的我知道如何在点击时更改div的颜色，但是我不知道如何从不同div的onclick更改div的颜色。然后在其上添加+1或-1。

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

注意 - 用户：uneducatedguy刚问了同样的问题，但他删除了它，因为人们嘲笑他，因为他称之为小提琴，而不是一个小提琴。

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/

Answer 2

你的意思是这样吗？

$('#clickDIV').click(function() {
  var x = $('#zielDIV').text() +1;
  $('#zielDIV').html(x);
});

更改div的颜色和数字

↑4↓

↑ 5 ↓

↑ 3 ↓

2 个答案: