7

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

initial state

↑ 4 ↓

upvoted

5

down voted

3

这是我到目前为止所拥有的。
我知道如何在单击时更改 div 的颜色,但是我不知道如何通过单击不同 div 来更改 div 的颜色。然后在此之上添加 +1 或 -1。

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

注意-用户:未受过教育的家伙刚刚问了同样的问题,但是他删除了它,因为人们在取笑他,因为他将其称为小提琴而不是jsfiddle。

4

2 回答 2

8

使用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>

脚本:

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/

于 2013-01-28T23:02:51.633 回答
0

你的意思是这样的吗?

$('#clickDIV').click(function() {
  var x = $('#zielDIV').text() +1;
  $('#zielDIV').html(x);
});
于 2013-01-28T23:02:06.440 回答